JavaScript - sleep function
In this short article, we're going to have a look at how in JavaScript create sleep(ms)
function.
Quick solution:
- create new function called
sleep
, - create inside and return
Promise
object, - resolve
Promise
withsetTimeout
after indicated time, - call the
sleep
function withawait
before inside otherasync
function.
Code:
let sleep = (ms) => {
return new Promise(resolve => setTimeout(resolve, ms));
};
// await sleep(1000); // <------ calling inside async function
Node:
async
/await
operators were introduced in ES8 (ES2017). Use Babel or TypeScript to provide this functionality in older browsers.
Explaination
There is no available sleep
function in JavaScript, but is is possible to emulate sleeping with acync
functions. The main idea is to postpone resolve
function call with setTimeout
wrapped in Promise
object. Later that create logic can be placed inside own sleep
function and called with await
keyword inside async
method only - it is main disadvantage/andvantage of the approach. Advantage becasue our logic will not freeze web browser like infinity loop does.
More complicated runnable example code below:
// ONLINE-RUNNER:browser;
let sleep = (ms) => {
return new Promise(resolve => setTimeout(resolve, ms));
};
// Usage example:
let action = async () => {
console.log('[START]');
for (let i = 0; i < 5; ++i) {
await sleep(1000); // sleeps 1s each iteration
console.log(i);
}
console.log('[STOP]');
};
action();