What is the JavaScript version of sleep()?
2017 — 2021 update
Since 2009 when this question was asked, JavaScript has evolved significantly. All other answers are now obsolete or overly complicated. Here is the current best practice:
function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));}async function demo() { console.log('Taking a break...'); await sleep(2000); console.log('Two seconds later, showing sleep in a loop...'); // Sleep in loop for (let i = 0; i < 5; i++) { if (i === 3) await sleep(2000); console.log(i); }}demo();This is it. await sleep(<duration>).
Or as a one-liner:
await new Promise(r => setTimeout(r, 2000));Note that,
awaitcan only be executed in functions prefixed with theasynckeyword, or at the top level of your script in an increasing number of environments.awaitonly pauses the currentasyncfunction. This means it's not blocking the execution of the rest of the script, which is what you want in the vast majority of the cases. If you do want a blocking construct, see this answer usingAtomics.wait, but note that most browsers will not allow it on the browser's main thread.
Two new JavaScript features (as of 2017) helped write this "sleep" function:
- Promises, a native feature of ES2015 (aka ES6). We also use arrow functions in the definition of the sleep function.
- The
async/awaitfeature lets the code explicitly wait for a promise to settle (resolve or reject).
Compatibility
- promises are supported in Node v0.12+ and widely supported in browsers, except IE
async/awaitlanded in V8 and has been enabled by default since Chrome 55 (released in Dec 2016)- it landed in Node 7 in October 2016
- and also landed in Firefox Nightly in November 2016
If for some weird reason you're using Node older than 7 (which has reached end of life), or are targeting old browsers, async/await can still be used via Babel (a tool that will transpile JavaScript + new features into plain old JavaScript), with the transform-async-to-generator plugin.
(See the updated answer for 2016)
I think it's perfectly reasonable to want to perform an action, wait, and then perform another action. If you are used to writing in multi-threaded languages, you probably have the idea of yielding execution for a set amount of time until your thread wakes up.
The issue here is that JavaScript is a single-thread event-based model. While in a specific case, it might be nice to have the whole engine wait for a few seconds, in general it is bad practice. Suppose I wanted to make use of your functions while writing my own? When I called your method, my methods would all freeze up. If JavaScript could somehow preserve your function's execution context, store it somewhere, then bring it back and continue later, then sleep could happen, but that would basically be threading.
So you are pretty much stuck with what others have suggested -- you'll need to break your code up into multiple functions.
Your question is a bit of a false choice, then. There is no way to sleep in the way you want, nor should you pursue the solution you suggest.
In JavaScript, I rewrite every function so that it can end as soon as possible. You want the browser back in control so it can make your DOM changes.
Every time I've wanted a sleep in the middle of my function, I refactored to use a setTimeout().
Edit
The infamous sleep, or delay, function within any language is much debated. Some will say that there should always be a signal or callback to fire a given functionality, others will argue that sometimes an arbitrary moment of delay is useful. I say that to each their own and one rule can never dictate anything in this industry.
Writing a sleep function is simple and made even more usable with JavaScript Promises:
// sleep time expects millisecondsfunction sleep (time) { return new Promise((resolve) => setTimeout(resolve, time));}// Usage!sleep(500).then(() => { // Do something after the sleep!});