Use an event stream of double clicks in RxJS

[00:00] We just saw previously how to transfer event streams of strings emitted over time using these maps and filters.

[00:09] Let's take a look at a more useful example. Say we have this button on the DOM, which can be clicked. Our challenge is to detect when double-clicks happen on this button. I know the DOM already has the DBL click type of event, but let's not use that. Let's actually suppose that the DOM wouldn't give that to us. The question is, "How would you typically solve this without event streams?"

[00:34] Maybe you would add an event listener to this button for the click events, and maybe when that event listener triggers, you would increment a counter, which was initialized to zero. Maybe you would set a time-out to later clear that counter back to zero, that type of approach. This is what typically most of us would do if we didn't know event streams.

[01:01] It wouldn't take three lines of code in this approach. It would take a bit more than that. Let's see the event stream approach instead, which is reactive programming. Say we somehow are able to get the event stream of sample clicks by just giving the DOM element and the event type. We just click, and this will create for us that event stream based on the DOM addEventListener.

[01:23] Now we just need to create double click stream. We add an event listener to that, and whenever we see a double-click event, we will set the label content to double click. After a second, we're going to clear that out, just for the UI purpose.

[01:44] It's actually pretty simple to achieve this with event streams. It's a matter of three operations. We buffer all of those clicks, and we end that buffer after 250 milliseconds of silence. Then these buffers return arrays for us, so we map each of these arrays to their lengths, and then we filter for those lengths, which are exactly size two.

[02:17] That's it. Double-click event stream is now ready. When we listen to this, we will see this happening. I double-clicked it, and it set the label to Double Click, and after one second it cleared it, and that's it. If I click just one, nothing happens. If I click three times or many times, then nothing happens. I need to double click, and then it sets. Nice.

[02:42] How did we do this? These operators, as you can see, they look important, and maybe you don't even know what they're doing here. How do we understand these operators? It's normally by using marble diagrams. What is that?

[02:56] Basically, imagine the simple click stream where each of these balls is the click event happening over time. The arrow indicates time. When we called buffer click stream throughout the whole 250 milliseconds, what it was it waited to 250 milliseconds of event silence to happen on this simple click event stream, and then it accumulated everything from the past into an array.

[03:24] Here we just had one. Then in this case, after 250 milliseconds of event silence happened, we accumulated all of these events into an array, and that's why we get that array, and so forth. Then we get, as a result, an event stream, which has arrays inside them, containing all of these accumulated clicks.

[03:48] Then what we do is just map the length of these arrays. Here there's just one in that array, here there's two, and then we're finally able to filter for only those lengths that are exactly two.

[04:03] These marble diagrams also come in their ASCII form. We might write them like this, so we might be using this type of notation also in some other examples. Even though you don't probably understand all of these operations now, the point is that you can create really powerful constructs with just simple operations in short amount of code.

[04:30] This is just the tip of the iceberg of what event streams can accomplish.