setTimeout function with Promise resolve value as a callback

Question

I have this piece of code that really confuses me, so I will try to paste it here and write down by words how I think it is executed, it probably won't be correct so you can correct me.

const wait = function(seconds) {
  return new Promise(function(resolve) {
    setTimeout(resolve, seconds * 1000);
  });
};

wait(1)
  .then(() => {
    console.log(`1 second passed`);
    return wait(1);
  })
  .then(() => {
    console.log(`2 second passed`);
    return wait(1);
  })
  .then(() => {
    console.log(`3 second passed`);
    return wait(1);
  })
  .then(() => {
    console.log(`4 second passed`);
    return wait(1);
  })
  .then(() => console.log(`5 second passed`));

So the part that confuses me is setting 'resolve' as a callback inside the setTimeout function, I will try to write step by step and you can correct me if it is wrong.

Step 1: We are calling wait function and passing 1 as a seconds argument
Step 2: Inside the function, we are creating a new Promise where we specified what happens only if the promise is settled(fulfilled), we don't care about rejection.
Step 3: Inside the promise constructor, we have setTimeout function with resolve as a callback which will be called after a 1-second pass.
Step 4: A second has passed, now our promise is fulfilled, the then method is fired. Since our 'resolve' is empty we can't use the then method's argument RIGHT? But still, then the method is fired after one second so we can use that to our advantage to log to the console that "1 second passed".
Step 5: We are returning new promises so we can chain methods.

user_157247 · Answer

Your explanation is good other than one minor point:

Since our 'resolve' is empty we can't use 'then' method's argument RIGHT?

You can, it's just that it will have the value undefined. The result of calling resolve with no arguments is exactly the same as the result of calling it with undefined: The fulfillment value of the promise is the value undefined:

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

wait(200)
.then(result => {
    console.log(`result is: ${result}`);
});

wait(200)
.then((...args) => {
    console.log(`args.length is: ${args.length}`);
});

Note that even though we call resolve with no arguments, the fulfillment handler is always called with exactly one argument.

user_9071943 · Answer

Overall, your explanation looks good enough. Just steps 4 & 5 have a bit wrong.

Step: 4 ....Since our 'resolve' is empty we can't use '.then' method's argument RIGHT...

The answer is NO. You still can .then, and the data will be undefined

var wait = function (seconds) {
  return new Promise(function (resolve) {
    setTimeout(resolve, seconds * 1000);
  });
};

wait(1)
  .then(() => {
    console.log(`1 second passed`);
  }).then((data) => { console.log("Result: " + data) });

Meanwhile, if you return the Promise or even any value, It still is value to resolve next .then.

var wait = function (seconds) {
  return new Promise(function (resolve) {
    setTimeout(resolve, seconds * 1000);
  });
};

wait(1)
  .then(() => {
    console.log(`1 second passed`);
    return 999;
  }).then((data) => { console.log(data) });

Step: 5 - We are returning a new promise so we can chain methods.

Actually, the value of the new promise will be the value of the next .then chain.

For example, Let's say the resolve inside setTimeout the specific value, then what's happened?

const wait = (expectedValue, seconds) => {
  return new Promise(function (resolve) {
    setTimeout(() => resolve(expectedValue), seconds * 1000);
  });
};

wait(100, 1)
  .then((data) => {
    console.log(`1 second passed, Value = ${data}`);
    return wait(200, 1);
  }).then((data) => {
    console.log(`1 second passed, Value = ${data}`);
  })

setTimeout function with Promise resolve value as a callback

2 Answers