Javascript chained setTimeOut to Promise, looking for a very sample example

Question

For prevent hell pyramid programming, I'm looking for use "Promise" with I'm still not familar.

By example, I have this ugly code :

var timeA = 500;
var timeB = 800;
var timeC = 750;

window.setTimeout(function(){
    //do stuff 1
    window.setTimeout(function(){
    //do stuff 2
        window.setTimeout(function(){
        //do stuff 3
        }, timeA);
    }, timeB);
}, timeC);

How must I change my code by using Promise mechanism ? Thank you :)

Do you still want to keep timeouts (prevent code to be executed until time ran out)? — schogges, Jul 12 '18 at 09:43
Try to convert them one callback at a time. Show us your attempt please. — Bergi, Jul 12 '18 at 09:49

score 2 · Answer 1 · answered Jul 12 '18 at 09:48

You will need to wrap setTimeout into a Promise.

Below I've also shown how you can then use with async / await..

var timeA = 500;
var timeB = 800;
var timeC = 750;

function wait(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

/*wait(timeA).
  then(() => console.log("timeA")).
  then(() => wait(timeB)).
  then(() => console.log("timeB")).
  then(() => wait(timeC)).
  then(() => console.log("timeC")); */

async function run() {
  await wait(timeA);
  console.log("timeA")
  await wait(timeB);
  console.log("timeB")
  await wait(timeC);
  console.log("timeC");
}

run();

very interesting...thank you ! – spacecodeur Jul 12 '18 at 09:55 — spacecodeur, Jul 12 '18 at 09:55

score 1 · Answer 2 · answered Jul 12 '18 at 09:43

You could create a "promisifying" function this way:

function doLater(thunk, delay){
    return new Promise(function(resolve, reject){
        window.setTimeout(function() {
            resolve(thunk());
        }, delay);
    });
}

Then you can call it this way:

doLater(doSomething, delay1)
    .then(result => doLater(doSomethingElse, delay2)
    .then(result => doLater(doAnotherThing(result), delay3)

str · Accepted Answer · 2018-07-12T09:58:38.890

1

For example:

var timeA = 500;
var timeB = 800;
var timeC = 750;
var wait = (seconds) => new Promise(r => setTimeout(r, seconds));

wait(timeA)
  .then(() => console.log('A'))
  .then(() => wait(timeB))
  .then(() => console.log('B'))
  .then(() => wait(timeC))
  .then(() => console.log('C'));

But when you are dealing with asynchronicity, using setTimeout is almost always not what you would use.

edited Jul 12 '18 at 09:58

answered Jul 12 '18 at 09:46

str

42,689
17
109
127

Perfect, thank you :) – spacecodeur Jul 12 '18 at 09:55

Javascript chained setTimeOut to Promise, looking for a very sample example

3 Answers3