This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Reactive Programming - Using an event stream of double clicks

4:36 RxJS lesson by

See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect double clicks with a few operators in RxJS.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect double clicks with a few operators in RxJS.

Avatar
Kevin

Why not just an actual button?

In reply to egghead.io
Avatar
Michele Mendel

I downloaded RxJS v4 and the double-click doesn't register. Switching to v2.3.22 - using https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js - the example started work.

Avatar
Michele Mendel

Using v4 you need to use debounce instead of throttle

Avatar
Niklas

Cool, I'm not the first to stumble on the throttle/debounce thing. Thanks for already having it answered here :)

Avatar
Richard Hoffmann

+1 for thanks :)

In reply to Michele Mendel
Avatar
Igor

How this code can be modified, so the doubleClick stream emits rightaway and not after 250ms delay?

Avatar
Niels Kristian Hansen Skovmand

Remember to use debounce()
instead
of throttle()

-- see the code examples on the page.

Avatar
Dominic Watson

Just subscribed to pro and not cool to see out of date tutorials. Using 5-beta I expected something not to work, but this tutorial running on 2 is ancient. The JSBin itself references 4 and doesn't even work.

Avatar
Andre

Thanks Dominic for reporting this. We fixed the JSBin example by changing the use of throttle() to delay(), because in older versions of RxJS, throttle used to have some delaying behavior too.

In reply to Dominic Watson
Avatar
Rafael

I spent quite some time trying to figure out how to do the same thing with the latest version of RxJS (5.0.0-beta.10) so I'd like to share here how I got it working:

const single$ = Rx.Observable.fromEvent(button, 'click');
single$
    .bufferWhen(() => single$.debounceTime(250))
    .map(list => list.length)
    .filter(length => length >= 2)
    .subscribe(totalClicks => {
        console.log(`multi clicks total: ${totalClicks}`);
    });

Thanks for this intro course Andre and please let me know if there's something wrong with this implementation or if there's a better way to do the same thing.

In reply to Andre
Avatar
PJ

Here is the version which works on rxjs 5.x:

const timeout = 250;
const clicks$ = Rx.Observable.fromEvent(button, "click");
const doubleClicks$ = clicks$
    .map(() => new Date())
    .bufferCount(2, 1)
    .map(([prev, next]) => (next - prev) < timeout)
    .scan((prev, next) => !prev && next, false)
    .filter(v => v)
In reply to Rafael
Avatar
Kostiantyn

Would work with that code too:

doubleClickStream = clickStream
    .bufferWhen(() => clickStream.debounceTime(250))
    .filter(arr => arr.length === 2);
Avatar
Shaun

That's what I ended up with in v5 too. I'm still bothered by the fact that the 250 ms delay applies even after the second click. Native double click events fire at mouse up, not 250 ms later.

In reply to Kostiantyn

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

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?"

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.

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.

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.

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.

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.

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?

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.

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.

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.

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.

This is just the tip of the iceberg of what event streams can accomplish.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?