DEV Community

Cover image for JavaScript has no sleep function, but we can easily solve it this way!
Daniel Zotti
Daniel Zotti

Posted on • Originally published at danielzotti.it

JavaScript has no sleep function, but we can easily solve it this way!

In order to make your browser sleep, just write this line of code:

await new Promise(_ => setTimeout(_, 2000));
Enter fullscreen mode Exit fullscreen mode

This will make the browser sleep for 2 seconds (2000ms).

Please note that it works in modern browsers only (> 2017)! See browser compatibility for await on caniuse.com.

Let's create a reusable sleep function

const sleep = (ms = 2000) => new Promise(_ => setTimeout(_, ms));
Enter fullscreen mode Exit fullscreen mode

Or with a more old days' notation:

function sleep(ms = 2000) { 
  return new Promise(function(_) {
    return setTimeout(_, ms)
  });
}
Enter fullscreen mode Exit fullscreen mode

If you want to explore other features of Promise you can browse the MDN Doc.

How to use it

console.log(`Let's wait for 5s`);

await sleep(5000); // 5000ms = 5seconds

console.log(`5s have passed`);
Enter fullscreen mode Exit fullscreen mode

Result in console:

> Let's wait for 5s
[waiting for 5 seconds]
> 5s have passed 
Enter fullscreen mode Exit fullscreen mode

Top-level await issue

Using top-level await might not work in some old browser/node versions. To solve this problem we can wrap our code
with an immediately-invoked async function.

(async function() {

  console.log(`Let's wait for 5s`);

  await sleep(5000);

  console.log(`5s have passed`);

}());  
Enter fullscreen mode Exit fullscreen mode

Sleep function in old browsers

Just a note about Sleep function in old browser: it has usually been written this way, but it's definitely not
"performance friendly".

function sleep(mss) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while(
    currentDate - date < milliseconds);
}
Enter fullscreen mode Exit fullscreen mode

Demo

I created a stackblitz project with a simple example.

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more