const delayTime = (time) =>
setTimeout(() => {
console.log("run after:", time);
}, time);
const runTime = async () => {
await delayTime(1000);
await delayTime(900);
};
runTime();And actual result is:
run after: 900 run after: 1000
And expected result I want:
run after: 1000 run after: 900
Async/await works with promises under the hood, so you need to return a promise from your delayTime function.
The Promise constructor accepts an executor function that is run synchronously (ie. immediately) with two callback functions as arguments: one to resolve the promise and another to reject the promise.
setTimeout and setInterval were added to JavaScript years before promises were widely understood, and are therefore not immediately compatible with promises: you need to "promisify" them.
To promisify a setTimeout expression you wrap it in a promise executor function and call the resolve callback function from inside the setTimeout callback .
const delayTime = (time) =>
new Promise((resolve) => setTimeout(() => {
console.log("run after:", time);
resolve();
}, time));
const runTime = async () => {
await delayTime(1000);
await delayTime(900);
};
runTime();
DelayTime synchronous? and why Pollute the async/await with promises? The whole point of using async/await is to act as an alternate to the promises pattern.
resolve() does not make the function synchronous. Async-await is just a syntactic abstraction of promises, it only works with promises and if the function you're calling doesn't return a promise (which setTimeout doesn't, it uses a callback) you have to wrap it in your own promise.
setTimeout is not an async function, so it does not return a promise. Even if you resolve a promise immediately, that just adds it to the event queue and the following code only gets executed once the thread is free and starts to process the event queue, meaning it's still asynchronous. That isn't even what's happening here though since resolve() is called in the callback to setTimeout(), i.e. not immediately.It's more logical to have timeout function separately, and call action (log) in caller function:
// Timeout function
const timeout = ms => new Promise(resolve => setTimeout(resolve, ms));
// Caller function
const test = async () => {
// Do all stuff here
console.log(`starting...`);
await timeout(3000);
console.log(`3 sec passed...`);
await timeout(5000);
console.log(`8 sec passed, finishing.`);
}
// Run test
test();The reason your you see 900 hundred printed earlier is that the time out set for setTimeout is not constant. 900 milliseconds pass faster than 1000 millisecs, so hence 900 is printed earlier.
I have changed the method to pass the time-out delay with the respective message. Here is the implementation:
const delayTime = ( delay, displayMessage) =>
setTimeout(() => {
console.log("run after:", displayMessage );
}, delay);
const runTime = async () => {
await delayTime(1000, '1000');
await delayTime(1000, '900');
};
runTime();
1000after ~1s and then log 900 after 900m/s. The use of async/await here is inncorrect, as you should only use await on a thenable (ie: a Promise), using it on something that isn't a thenable doesn't do much (you'll see that if you remove async/await you'll get the same result). At the moment your code queues two timeouts in parallel that then complete and execute at the same time.async but this promise doesn't accomplish anything unless there's an existing promise that controls the execution of code.
const delayTime = time => { return new Promise(resolve => { setTimeout(() => { console.log('run after:', time); resolve(); }, time); }); };setTimeout()andsetInterval()do not create a promise