Events and Callbacks, need to wait before two events triggered and call callback

Question

The code could be simplified to something like that,

function start(callback) {
    one.on('ready', () => {
        console.log('one server ready');
    });

    two.on('ready', () => {
        console.log('two connection ready');
    });

    one.connect();
    two.start();
}

I need to call that callback, after both services getting to ready state. What's the best pattern for that?

Update: Ideas how to do that with RxJS are welcome :)

async parallel is for another case.. then I'm having a bunch of async functions, that need to be executed and single callback triggered. Here I don't have function, I have eventemitters. — Alexander Beletsky, Aug 06 '15 at 10:05
Just wrap them into async functions and call their callback in the event handler — deyhle, Aug 06 '15 at 10:08

score 8 · Answer 1 · edited May 23 '17 at 11:54

8

You asked for promises, let's see how we can convert one time events to promises, aka promisifying the emitters:

function ready(ee){
    return new Promise(function(resolve) {
        ee.on("ready", resolve); // resolve when ready
    });
}

Which would let you do:

Promise.all([ready(one), ready(two)]).then(function(){
   // both ready here
});

You can easily aggregate promises which is very nice :)

edited May 23 '17 at 11:54

Community

1
1

answered Aug 06 '15 at 10:08

Benjamin Gruenbaum

270,886
87
504
504

good one. promises of cause are really obvious here.. would be interesting to see some alternatives..) – Alexander Beletsky Aug 06 '15 at 10:13
@alexanderb alternatives are good. Just keep in mind that promises are the standard and the way forward. Expect more and more APIs to move to them. – Benjamin Gruenbaum Aug 06 '15 at 10:14

score 6 · Accepted Answer · answered Aug 06 '15 at 18:30

The RxJS way of approaching it would be to use either zip or when/and/thenDo for the synchronization, and fromEvent to manage the EventEmitter

function ready(ee) {
  return Rx.Observable.fromEvent(ee, 'ready');
}

//EITHER
var option1 = Rx.Observable.when(ready(one).and(ready(two))
                                 .thenDo((first, second) => "Both Ready!"));

//OR
var option2 = Rx.Observable.zip(ready(one), ready(two), 
                                (first, second) => "Both Ready!");

option1.take(1).subscribe(() => callback());

Matt Harrison · Answer 3 · 2015-08-06T10:47:42.203

1

Low-tech

A low-tech way is to maintain a counter of events and then call the callback when you have received enough:

function start (callback) {

    var numSteps = 2;
    var currStep = 0;

    var step = function () {

        currStep++;
        if (currStep === numSteps) {
            callback();
        }
    }

    one.once('ready', () => {

        step();
        console.log('one server ready');
    });

    two.once('ready', () => {

        step();
        console.log('two connection ready');
    });

    one.connect();
    two.start();
}

edited Aug 06 '15 at 10:47

answered Aug 06 '15 at 10:08

Matt Harrison

13,381
6
48
66

thanks, I know that pattern.. but it looks too clumsy to me. looking for more interesting ideas. – Alexander Beletsky Aug 06 '15 at 10:10
This pattern is called an "asynchronous semaphore" or just a semaphore. – Benjamin Gruenbaum Aug 06 '15 at 10:14

score 0 · Answer 4 · answered Mar 31 '18 at 08:30

You can look at the event-as-promise package. It convert events into Promise continuously until you are done with all the event processing.

In your case,

import EventAsPromise from 'event-as-promise';

const oneReady = new EventAsPromise();
const twoReady = new EventAsPromise();

one.once('ready', oneReady.eventListener);
two.once('ready', twoReady.eventListener);

await Promise.all([one.upcoming(), two.upcoming()]);

Simple and cleaner than RxJS in this case.

score 0 · Answer 5 · answered Sep 17 '18 at 06:41

With `jQuery ($)`:

$('#greet').one('click', function(evt){
  $(evt.currentTarget).one('click', function(){
    alert('Hi!');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="greet">Greet ONLY on second click.</button>

Good Luck...

Events and Callbacks, need to wait before two events triggered and call callback

5 Answers5

With jQuery ($):

With `jQuery ($)`: