事件监听器Javascript

Question

I have 3 instances of the class Foo() . Let's call them foo1, foo2 and foo3 . By default, the propriety isReady of Foo() is false . In the constructor of Foo() , there is an asynchrousnous method that sets isReady to true. For instance, I could be setTimout with different duration. After I instantiate these 3 instance, there is function called: startMainAction() that should be called only after foo1.isReady = true and foo2.isReady = true and foo3.isReady = true Given that the asynchronous function is undetermined, (it could be random duration), there is no way for sure the order at which the foo instances will have their propriety isReady set to true . Hence, I do not think I could use callbacks to call startMainAction .

How can that be achieved?

  class Foo{ constructor(n){ this.isReady = false; setTimeout(()=>{ this.isReady = true; console.log('I am ready '+n); }, Math.random()*1000) } } const foo1 = new Foo(1) const foo2 = new Foo(2) const foo3 = new Foo(3) function startMainAction(){ console.log('All fooes must be ready before I was called') } 

Answer 1

One option is to add a method which adds a callback to call once you set isReady to true:

onReady(callback) {
  this.readyCallbacks.push(callback);
}

Then, with those three instances, call onReady with the resolve of a Promise, and call Promise.all on those three Promises:

const foos = [foo1, foo2, foo3];
Promise.all(foos.map(foo => new Promise(resolve => foo.onReady(resolve))))
  .then(startMainAction);

 class Foo { constructor() { this.readyCallbacks = []; this.isReady = false; setTimeout(() => { this.isReady = true; console.log('I am ready'); this.readyCallbacks.forEach(callback => callback()); }, Math.random() * 1500) } onReady(callback) { this.readyCallbacks.push(callback); } } const foo1 = new Foo() const foo2 = new Foo() const foo3 = new Foo() function startMainAction() { console.log('All fooes must be ready before I was called') } const foos = [foo1, foo2, foo3]; Promise.all(foos.map(foo => new Promise(resolve => foo.onReady(resolve)))) .then(startMainAction); 

I suppose you could also pass the readyCallback in the constructor, which would result in less code, but that doesn't seem quite appropriate, because a Foo (say, foo4 ) may not need a readyCallback , and a readyCallback isn't necessary to create an instance, it's a handler that other parts of the code request to add to an instance. (for example, if you had two parts of the code which had to listen for the isReady of foo1 , you would need something like this onReady method.)

Answer 2

Have the constructor method create a promise that will resolve when the condition to make the object ready happens.

Then get the promises from all of the instances and wrap them with Promise.all so they wait for all of them.

 class Foo { constructor() { this.isReady = false; this.isReadyPromise = new Promise( res => setTimeout( () => { console.log("I am ready"); this.isReady = true; res(true); }, 1000 + 1000 * (Math.floor(Math.random() * Math.floor(3))) ) ) } } const foo1 = new Foo(), foo2 = new Foo(), foo3 = new Foo(); Promise.all([ foo1.isReadyPromise, foo2.isReadyPromise, foo3.isReadyPromise ]).then(() => { console.log("All 3 are ready") }); 

Answer 3

You can add all of your instances of Foo into a list, an array or anything that you can iterate over. Then do something along the lines of

let foos = [foo1, foo2, foo3];

function WaitUntilReady(callback) {
    let ready = true;
    foreach (let foo of foos) {
        if ( !foo.isReady ) {
            ready = false;
            break;
        }
    }

    if ( ready ) {
        callback(); 
    } else {
        setTimeout(WaitUntilReady, 100); //100 miliseconds until next check
    }
}

WaitUntilReady(function() {
    //every instance is ready
});

Edit: using Promises seems more fancy, not sure if it really is. I'm not that much of a javascript developer so i did not even think of using them