2

I have two setTimeOut here. The second setTimeOut must be called after the first time out.

 setTimeout(() => { 
        mack.classList.add('loaded'); 
    }, 3000);

    setTimeout(() => { 
        location.reload(true);
    }, 4000);

But I know that this is not a good solution on this. So I tried to do a Promise:

  const timer = ms => new Promise(res => setTimeout(res, ms));

     Promise.all([
          timer(3000).then(mack.classList.add('loaded')),
          timer(1000).then(location.reload(true))
    ])

This however, did not work. How can I fix this to make it call in order? Also, is there a version to do this using asynchronous?

Improve this question
4
  • 1
    Put the second timer inside the then of the first timer? Also, pass a function to the then like you do with setTimeout. At the moment it won't work Commented Apr 14, 2021 at 10:12
  • 1
    Do you want to run second after first? Commented Apr 14, 2021 at 10:14
  • For await timer(3000) await timer(1000) how to I add the code then like the adding of classlist? Commented Apr 14, 2021 at 10:18
  • I removed my comment, as it turned out, i had to cut too much, to make it fit. However, you'd use something like (async () => { await timer(3000); mack.classList.add('loaded'); await timer(1000); location.reload(true); })(); Commented Apr 14, 2021 at 10:20

2 Answers 2

Reset to default
3

You are nearly there,

To use timer the way you want, you can use async / await, just remember to be able to use await, it has to be called withing another async function, here I've just placed inside an IFFE to achieve this..

const timer = ms => new Promise(res => setTimeout(res, ms));

(async function () {
  console.log('Waiting 3 seconds');
  await timer(3000);
  console.log('loaded');
  await timer(1000);
  console.log('reload');
}());

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

How to run the mack.classList.add('loaded'); inside the await?
@JonesSmith In the above snippet, the bit were I put console.log('loaded') replace with the classList bit, I've not put that part of the code in the snippet, so that it's a working snippet and the OP can click Run code snippet to see it working.
1

You are creating the promises, and then passing them to Promise.all, which waits for all of them simultaneously.

You want to start the second timer in response to the first timer.

This would do you you want:

timer(3000)
  .then(() => {
       mack.classList.add('loaded');
       return timer(1000);
  }).then(() => location.reload(true));

If you wanted this in an an async function:

async function example() {
   await timer(3000);
   mack.classList.add('loaded');
   await timer(1000);
   location.reload(true);
}

example().then(() => console.log('async function complete!'));
Improve this answer

6 Comments

Do I need to put this all inside the Promise.all to run?
@AichiGarcia No, you do not need Promise.all. Promise.all is for when you are running different pieces of asynchronous code simultaneously, while in this example you want to run the code in sequence.
SOrry to ask this again, but is there a way to have the same version in asychronous js?
@AichiGarcia What do you mean by 'asynchronous js'?
I mean async function the same version?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.