How to schedule multiple timeout functions

Question

I have a scenario where I need to schedule multiple timeouts in vanilla JS, it will be something like this below:

const scheduler = {
  done: function() {},
  schedule: function() {}
};
scheduler.schedule(function(done) {
  setTimeout(() => {
    console.log(1);
    done()
  }, 2000);
});
scheduler.schedule(function(done) {
  setTimeout(() => {
    console.log(2);
    done()
  }, 1000);
});
scheduler.schedule(function(done) {
  setTimeout(() => {
    console.log(3);
    done()
  }, 3000);
});

it should execute it in such a way that it must print below:

1
2
3

That makes no sense? You're setting the timeout for `log(2)` to 1 second, and the timeout for `log(1)` to 2 seconds, so the order will _by definition_ be 2, 1, 3. If you need 1, 2, 3, then give them the timeout values they need to effect that. — Mike 'Pomax' Kamermans, Jul 22 '20 at 05:06
I guess you should use promise which guarantee the serialize of actions — ganesh phirke, Jul 22 '20 at 05:06
@ganeshphirke they're timeouts: their _timeout interval_ guarantees when the code runs. A promise won't change that. — Mike 'Pomax' Kamermans, Jul 22 '20 at 05:07
I have edited the question for more clarity of what needs to be done. — Asutosh, Jul 22 '20 at 09:51
@sp00m the intent of scheduler.done is basically a function which can be used to notify a timeout finction has been executed. — Asutosh, Jul 22 '20 at 10:14

FZs · Answer 1 · 2020-07-22T21:45:01.570

This is a nice use case of promises.

These objects allow the abstraction over asynchronous operations, and fortunately, can be chained.

const scheduler = {
  last: Promise.resolve(),
  schedule(cb){
    this.last = this.last.then(() => new Promise(cb))
  }
}
scheduler.schedule(function(done) {
  setTimeout(() => {
    console.log(1);
    done()
  }, 2000);
});
scheduler.schedule(function(done) {
  setTimeout(() => {
    console.log(2);
    done()
  }, 1000);
});
scheduler.schedule(function(done) {
  setTimeout(() => {
    console.log(3);
    done()
  }, 3000);
});

However, if you use this with promises you obtained from elsewhere , it can quickly turn into the Explicit Promise construction antipattern, so, for a more general code, move the new Promise() part out of the schedule method:

const scheduler = {
  last: Promise.resolve(),
  schedule(cb){
    this.last = this.last.then(cb)
  }
}
scheduler.schedule(function() {
  return new Promise(done => {
    setTimeout(() => {
      console.log(1);
      done()
    }, 2000);
  })
});
scheduler.schedule(function() {
  return new Promise(done => {
    setTimeout(() => {
      console.log(2);
      done()
    }, 1000);
  })
});
scheduler.schedule(function() {
  return new Promise(done => {
    setTimeout(() => {
      console.log(3);
      done()
    }, 3000);
  })
});

score 1 · Answer 2 · answered Jul 22 '20 at 05:26

You would need a que for the timeouts, eg:

const scheduler = {
    done:function(){}, // Not sure what this function is supposed to do
    schedule:function(callback, timeout) {
        scheduler.que.push([callback, timeout]); // Add the function along with its wait time
        if(scheduler.que.length == 1) scheduler.startQue(); // If the que was previously empty, start the execution of the que
    },
    startQue() {
        setTimeout(() => {
            scheduler.que[0][0](); // run the callback timeout
            scheduler.que.shift(); // Remove the just ran timeout
            if(scheduler.que.length >= 1) scheduler.startQue(); // Start another timeout if we still have some in the que
        }, scheduler.que[0][1]);
    },
    que: []
};
scheduler.schedule(() => console.log(1), 2000); // Wait for 2 seconds to print
scheduler.schedule(() => console.log(2), 1000); // Wait 1 second after the first one printed
scheduler.schedule(() => console.log(3), 3000); // Wait another 3 seconds after the second one

you have changed the question, schedule supposed to take function as an input, not both function and it's corresponding timeout — Asutosh, Jul 22 '20 at 09:44

GirkovArpa · Answer 3 · 2020-07-22T06:58:02.753

-1

const scheduler = {
  done: function (cb) {
    cb();
    this.timeouts.shift();
    this.timeouts[0] && this.timeouts[0]();
  },
  schedule: function (cb, ms) {
    const timeout = () => setTimeout(this.done.bind(this), ms, cb);
    this.timeouts.push(timeout) == 1 && timeout();
  },
  timeouts: [],
};

scheduler.schedule(() => console.log('1'), 2000);
scheduler.schedule(() => console.log('2'), 1000);
scheduler.schedule(() => console.log('3'), 3000);

edited Jul 22 '20 at 06:58

answered Jul 22 '20 at 06:13

GirkovArpa

4,427
4
14
43

you have changed the question, schedule supposed to take function as an input, not both function and it's corresponding timeout – Asutosh Jul 22 '20 at 09:12
When I posted this answer your example was `scheduler.schedule(setTimeOut()=>{console.log(1)},2000);`, which is not even valid JavaScript, much less a "function and its timeout". If you want precise answers you need a precise question. – GirkovArpa Jul 22 '20 at 15:31
oops my bad. Sorry about that, the question should have been more precise and syntatically correct. – Asutosh Jul 23 '20 at 04:41

How to schedule multiple timeout functions

3 Answers3