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));}

Or as a one-liner:

await new Promise(r => setTimeout(r, 2000));

As a function:

const sleep = ms => new Promise(r => setTimeout(r, ms));

or in Typescript:

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

use it as:

await sleep(<duration>);

Demo:

function sleep(ms) {    return new Promise(resolve => setTimeout(resolve, ms));}async function demo() {    for (let i = 0; i < 5; i++) {        console.log(`Waiting ${i} seconds...`);        await sleep(i * 1000);    }    console.log('Done');}demo();

Note that,

1. await can only be executed in functions prefixed with theasync keyword, or at the top level of your script inan increasing number of environments.
2. await only pauses the currentasync function. This means it does not block 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, seethis 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 usearrow functions in the definition of the sleep function.
• Theasync/await feature lets the code explicitly wait for a promise to settle (resolve or reject).

Compatibility

• promises are supportedin Node v0.12+ andwidely supported in browsers, except IE
• async/await landed in V8 and has beenenabled by default since Chrome 55 (released in Dec 2016)
  • it landedin Node 7 in October 2016
  • and also landedin Firefox Nightly in November 2016

If for some reason you're using Node older than 7 (which reachedend of life in 2017), or are targeting old browsers,async/await can still be used viaBabel (a tool that willtranspile JavaScript + new features into plain old JavaScript), with thetransform-async-to-generator plugin.

(See theupdated 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 asetTimeout().

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!});

If you are inside anasync function you can do a proper await step with the above definition ofsleep():

// Available inside async functions:await sleep(500);// Do something after the sleep…

InFirebug (and probably other JavaScript consoles), nothing happen after hitting enter, only after the sleep duration specified (...)

function sleepFor(sleepDuration){    var now = new Date().getTime();    while(new Date().getTime() < now + sleepDuration){ /* Do nothing */ }}

Example of use:

function sleepFor(sleepDuration){    var now = new Date().getTime();    while(new Date().getTime() < now + sleepDuration){         /* Do nothing */     }}function sleepThenAct(){    sleepFor(2000);    console.log("Hello, JavaScript sleep!");}sleepThenAct()

Note:Only for debugging and development

I agree with the other posters. A busy sleep is just a bad idea.

However, setTimeout does not hold up execution. It executes the next line of the function immediately after the timeout is SET, not after the timeout expires, so that does not accomplish the same task that a sleep would accomplish.

The way to do it is to breakdown your function into before and after parts.

function doStuff(){  // Do some things  setTimeout(continueExecution, 10000) // Wait ten seconds before continuing}function continueExecution(){   // Finish doing things after the pause}

Make sure your function names still accurately describe what each piece is doing (i.e., GatherInputThenWait and CheckInput, rather than funcPart1 and funcPart2)

This method achieves the purpose of not executing the lines of code you decide untilafter your timeout, while still returning control back to the client PC to execute whatever else it has queued up.

As pointed out in the comments this will absolutelynot work in a loop. You could do some fancy (ugly) hacking to make it work in a loop, but in general that will just make for disastrous spaghetti code.

For the love of $DEITY please do not make a busy-wait sleep function.setTimeout andsetInterval do everything you need.

var showHide = document.getElementById('showHide');setInterval(() => {    showHide.style.visibility = "initial";    setTimeout(() => {        showHide.style.visibility = "hidden"    }, 1000);}, 2000);

<div>Hello! Goodbye!</div>

Every two second interval hide text for one second. This shows how to use setInterval and setTimeout to show and hide text each second.

If (like me) you're using JavaScript withRhino, you can use...

try{  java.lang.Thread.sleep(timeInMilliseconds);}catch (e){  /*   * This will happen if the sleep is woken up - you might want to check   * if enough time has passed and sleep again if not - depending on how   * important the sleep time is to you.   */}

Use:

await new Promise(resolve => setTimeout(resolve, 2000));

inside an async function.

If you're using jQuery, someone actually created a "delay" plugin that's nothing more than a wrapper for setTimeout:

// Delay Plugin for jQuery// - http://www.evanbot.com// - © 2008 Evan ByrnejQuery.fn.delay = function(time,func){    this.each(function(){        setTimeout(func,time);    });    return this;};

You can then just use it in a row of function calls as expected:

$('#warning').addClass('highlight').delay(1000).removeClass('highlight');

1. Standard #"2">

2. Bun.js has natively implmented the above function:

   await Bun.sleep(1000) // Sleep for 1 second

   See:https://bun.sh/guides/util/sleep

3. Node.js:

   Since Node.js 16+ a new promisified version ofsetTimeout() is available:

   import {setTimeout} from 'timers/promises'await setTimeout(1000) // Sleep for 1 second

   See:https://nodejs.org/api/timers.html#timerspromisessettimeoutdelay-value-options

I've searched for a sleep solution too (not for production code, only for development and tests) and found this article:

JavaScript sleep() or wait()

...and here's another article with client-side solutions:JavaScript sleep

Also, when you are callingalert(), your code will be paused too, while the alert is shown -- you need to find a way to not display alert, but get the same effect. :)

Here you go. As the code says, don't be a bad developer and use this on websites. It's a development utility function.

// Basic sleep function based on ms.// DO NOT USE ON PUBLIC FACING WEBSITES.function sleep(ms) {    var unixtime_ms = new Date().getTime();    while(new Date().getTime() < unixtime_ms + ms) {}}

Here's a simple solution using a synchronous XMLHttpRequest:

function sleep(n){  var request = new XMLHttpRequest();  request.open('GET', '/sleep.php?n=' + n, false);  // `false` makes the request synchronous  request.send(null);}

Contents of filesleep.php:

<?php sleep($_GET['n']);

Now call it with:

sleep(5);

Using an existing server implementation

If you don't have your own application server (for the above PHP script), you could use some online service instead. For instance:

function sleep(n) {     var request = new XMLHttpRequest();    request.open('GET', 'http://httpstat.us/200?sleep=' + n, false);    request.send(null);};sleep(1000);console.log("one second delay completed.");

Support

About passingfalse for theasynchronous parameter,mdn notes:

Synchronous requests on the main thread can be easily disruptive to the user experience and should be avoided; in fact, many browsers have deprecated synchronous XHR support on the main thread entirely. Synchronous requests are permitted in Workers.

The actual delay

The number of milliseconds that is passed as argument will be the time that the server waits between receiving the request and sending the response. The delay incurred by transmission and server load will beadded to that.

2019 Update usingAtomics.wait

It should work inNode.js 9.3 or higher.

I needed a pretty accurate timer in Node.js and it works great for that.

However, it seems like there is extremely limited support in browsers.

let ms = 10000;Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);

Ran a few 10 second timer benchmarks.

With setTimeout I get a error of up to 7000 microseconds (7 ms).

With Atomics, my error seems to stay under 600 microseconds (0.6 ms)

2020 Update: In Summary

function sleep(millis){ // Need help of a server-side page  let netMillis = Math.max(millis-5, 0); // Assuming 5 ms overhead  let xhr = new XMLHttpRequest();  xhr.open('GET', '/sleep.jsp?millis=' + netMillis + '&rand=' + Math.random(), false);  try{    xhr.send();  }catch(e){  }}function sleepAsync(millis){ // Use only in async function  let netMillis = Math.max(millis-1, 0); // Assuming 1 ms overhead  return new Promise((resolve) => {    setTimeout(resolve, netMillis);  });}function sleepSync(millis){ // Use only in worker thread, currently Chrome-only  Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, millis);}function sleepTest(){  console.time('sleep');  sleep(1000);  console.timeEnd('sleep');}async function sleepAsyncTest(){  console.time('sleepAsync');  await sleepAsync(1000);  console.timeEnd('sleepAsync');}function sleepSyncTest(){  let source = `${sleepSync.toString()}    console.time('sleepSync');    sleepSync(1000);    console.timeEnd('sleepSync');`;  let src = 'data:text/javascript,' + encodeURIComponent(source);  console.log(src);  var worker = new Worker(src);}

of which the server-side page, e.g.sleep.jsp, looks like:

<%try{  Thread.sleep(Long.parseLong(request.getParameter("millis")));}catch(InterruptedException e){}%>

An inliner:

(async () => await new Promise(resolve => setTimeout(resolve, 500)))();

500 here is the time in milliseconds for which VM will wait before moving to the next line of code.

Bit of tldr;

Basically, when you create a promise, it returns an observable while at creation giving a reference of resolve in a callback meant for handing over data/response once it's available. Here, resolve is called viasetTimeOut after 500ms, and till resolve is not executed the outside scope is waiting to proceed further, hence, creating a fake blocking. It's totally different than the non-blocking(or call non-thread-reserving sleep available in other languages), as the thread and most probably the UI and any other ongoing tasks of webpage/node-application will be blocked and the main thread will be exclusively used for awaiting the promise resolution.

First:

Define a function you want to execute like this:

function alertWorld(){  alert("Hello, World!");}

Then schedule its execution with thesetTimeout method:

setTimeout(alertWorld, 1000)

Note two things

• the second argument is time in milliseconds
• as a first argument, you have to pass just the name (reference) of the function, without the parentheses

The shortest solution without any dependencies:

await new Promise(resolve => setTimeout(resolve, 5000));

A better solution to make things look like what most people want is to use an anonymous function:

alert('start');var a = 'foo';// Lots of codesetTimeout(function(){  // Beginning of code that should run AFTER the timeout    alert(a);    // Lots more code}, 5000);  // Put the timeout here

This is probably the closest you'll get to something that simply does what you want.

Note, if you need multiple sleeps this can get ugly in a hurry and you might actually need to rethink your design.

ThesetTimeout is part of the JavaScript asynchronous methods (methods which are starting to execute and their result will be queued sometime in the future to a component called the callback queue, later to be executed)

What you probably want to do is to wrap thesetTimeout function within a Promise.

promise example:

const sleep = time => new Promise(res => setTimeout(res, time, "done sleeping"));// using native promisessleep(2000).then(msg => console.log(msg));

async/await example:

const sleep = time => new Promise(res => setTimeout(res, time, "done sleeping"));// using async/await in top level(async function(){  const msg = await sleep(2000);  console.log(msg);})();

Read more aboutsetTimeout

One-liner usingPromises

const wait = t => new Promise(s => setTimeout(s, t, t));

Typescript with Abort Signal

const wait = (x: number, signal?: AbortSignal): Promise<number> => {  return new Promise((s, f) => {    const id = setTimeout(s, x, x);    signal?.addEventListener('abort', () => {      clearTimeout(id);      f('AbortError');    });  });};

Demo

const wait = t => new Promise(s => setTimeout(s, t));// Usageasync function demo() {    // Count down    let i = 6;    while (i--) {        await wait(1000);        console.log(i);    }    // Sum of numbers 0 to 5 using by delay of 1 second    const sum = await [...Array(6).keys()].reduce(async (a, b) => {        a = await a;        await wait(1000);        const result = a + b;        console.log(`${a} + ${b} = ${result}`);        return result;    }, Promise.resolve(0));    console.log("sum", sum);}demo();

This answer is forNode 18 and newer versions!

Instead of doing:

await new Promise(resolve => setTimeout(resolve, 2000));

We can now do:

const { setTimeout } = require('timers/promises');await setTimeout(3000); // sleep 3 seconds

I would encapsulate setTimeOut in a Promise for code consistency with other asynchronous tasks: Demo inFiddle

function sleep(ms){    return(new Promise(function(resolve, reject) {        setTimeout(function() { resolve(); }, ms);    }));}

It is used like this:

sleep(2000).then(function() {   // Do something});

It is easy to remember the syntax if you are used to using Promises.

For browsers, I agree that setTimeout and setInterval are the way to go.

But for server-side code, it may require a blocking function (for example, so you can effectively have thread synchronization).

If you're usingNode.js andMeteor, you may have run into the limitations of using setTimeout in a fiber. Here is the code for server-side sleep.

var Fiber = require('fibers');function sleep(ms) {    var fiber = Fiber.current;    setTimeout(function() {        fiber.run();    }, ms);    Fiber.yield();}Fiber(function() {    console.log('wait... ' + new Date);    sleep(1000);    console.log('ok... ' + new Date);}).run();console.log('back in main');

See:Node.js Fibers, Sleep

Most of the answers here are misguided or at the very least outdated. There is no reason JavaScript has to be single threaded, and indeed it isn't. Today all the mainstream browsers support workers. Before this was the case, other JavaScript runtimes likeRhino and Node.js supported multithreading.

'JavaScript is single threaded' is not a valid answer. For example, running a sleep function within a worker would not block any of the code running in the UI thread.

In newer runtimes supporting generators and yield, one could bring similar functionality to the sleep function in a singlethreaded environment:

// This is based on the latest ES6 drafts.// JavaScript 1.7+ (SpiderMonkey/Firefox 2+) syntax is slightly different// Run code you want to sleep here (omit star if using JavaScript 1.7)function* main(){    for (var i = 0; i < 10; i++) {        // To sleep for 10 milliseconds 10 times in a row        yield 10;    }    yield 5;    console.log('I just slept 5 milliseconds!');}// Resume the given generator after ms millisecondsfunction resume(ms, generator){    setTimeout(function(){        // Omit .value if using JavaScript 1.7        var nextSleep = generator.next().value;        resume(nextSleep, generator);    }, ms);}// Initialize a generator and get first sleep for the recursive functionvar    generator = main(),    firstSleep = generator.next().value;// Initialize recursive resume functionresume(firstSleep, generator);

This imitation of sleep is different from a true sleep function as it does not block the thread. It is simply sugar on top of JavaScript's currentsetTimeout function. This functionality type has been implemented inTask.js and should work today in Firefox.

UPDATE 2022

Just use this code snippet.

await new Promise(resolve => setTimeout(resolve, 2000));

SinceNode.js 7.6, you can combine thepromisify function from theutils module withsetTimeout.

const sleep = require('util').promisify(setTimeout)

General Usage

async function main() {    console.time("Slept for")    await sleep(3000)    console.timeEnd("Slept for")}main()

Question Usage

async function asyncGenerator() {    while (goOn) {      var fileList = await listFiles(nextPageToken);      await sleep(3000)      var parents = await requestParents(fileList);    }  }

I have searched/googled quite a few webpages on JavaScript sleep/wait... and there isno answer if you want JavaScript to "RUN, DELAY, RUN"... what most people got was either, "RUN, RUN(useless stuff), RUN" or "RUN, RUN + delayed RUN"...

I thought:here is a solution that works... but you have to chop up your running codes...:Yes, I know, this is just an easier to read refactoring... still...

Example 1:

<html><body><div id="id1">DISPLAY</div><script>// JavaScript sleep by "therealdealsince1982"; copyrighted 2009// setIntervalvar i = 0;function run() {    // Pieces of codes to run    if (i == 0){document.getElementById("id1").innerHTML= "<p>code segment " + i + " is ran</p>"; }    if (i == 1){document.getElementById("id1").innerHTML= "<p>code segment " + i + " is ran</p>"; }    if (i == 2){document.getElementById("id1").innerHTML= "<p>code segment " + i + " is ran</p>"; }    if (i >2){document.getElementById("id1").innerHTML= "<p>code segment " + i + " is ran</p>"; }    if (i == 5){document.getElementById("id1").innerHTML= "<p>all code segment finished running</p>"; clearInterval(t); } // End interval, stops run    i++; // Segment of code finished running, next...}run();t = setInterval("run()", 1000);</script></body></html>

Example 2:

<html><body><div id="id1">DISPLAY</div><script>// JavaScript sleep by "therealdealsince1982"; copyrighted 2009// setTimeoutvar i = 0;function run() {    // Pieces of codes to run, can use switch statement    if (i == 0){document.getElementById("id1").innerHTML= "<p>code segment " + i + " ran</p>"; sleep(1000);}    if (i == 1){document.getElementById("id1").innerHTML= "<p>code segment " + i + " ran</p>"; sleep(2000);}    if (i == 2){document.getElementById("id1").innerHTML= "<p>code segment " + i + " ran</p>"; sleep(3000);}    if (i == 3){document.getElementById("id1").innerHTML= "<p>code segment " + i + " ran</p>";} //stops automatically    i++;}function sleep(dur) {t=setTimeout("run()", dur);} // Starts flow control again after 'dur'run(); // Starts</script></body></html>

Example 3:

<html><body><div id="id1">DISPLAY</div><script>// JavaScript sleep by "therealdealsince1982"; copyrighted 2009// setTimeoutvar i = 0;function flow() {    run(i);    i++; // Code segment finished running, increment i; can put elsewhere    sleep(1000);    if (i == 5) {clearTimeout(t);} // Stops flow, must be after sleep()}function run(segment) {    // Pieces of codes to run, can use switch statement    if (segment == 0){document.getElementById("id1").innerHTML= "<p>code segment " + segment + " is ran</p>"; }    if (segment == 1){document.getElementById("id1").innerHTML= "<p>code segment " + segment + " is ran</p>"; }    if (segment == 2){document.getElementById("id1").innerHTML= "<p>code segment " + segment + " is ran</p>"; }    if (segment >2){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }}function sleep(dur) {t=setTimeout("flow()", dur);} // Starts flow control again after 'dur'flow(); // Starts flow</script></body></html>

Example 4:

<html><body><div id="id1">DISPLAY</div><script>// JavaScript sleep by "therealdealsince1982"; copyrighted 2009// setTimeout, switchvar i = 0;function flow() {    switch(i)    {        case 0:            run(i);            sleep(1000);            break;        case 1:            run(i);            sleep(2000);            break;        case 5:            run(i);            clearTimeout(t); // Stops flow            break;        default:            run(i);            sleep(3000);            break;    }}function run(segment) {    // Pieces of codes to run, can use switch statement    if (segment == 0){document.getElementById("id1").innerHTML= "<p>code segment " + segment + " is ran</p>"; }    if (segment == 1){document.getElementById("id1").innerHTML= "<p>code segment " + segment + " is ran</p>"; }    if (segment == 2){document.getElementById("id1").innerHTML= "<p>code segment " + segment + " is ran</p>"; }    if (segment >2){document.getElementById("id1").innerHTML= "<p>code segment " + segment + " is ran</p>"; }    i++; // Current segment of code finished running, next...}function sleep(dur) {t=setTimeout("flow()", dur);} // Starts flow control again after 'dur'flow(); // Starts flow control for first time...</script></body></html>

function sleep(milliseconds) {  var start = new Date().getTime();  for (var i = 0; i < 1e7; i++) {    if ((new Date().getTime() - start) > milliseconds){      break;    }  }}

If you want less clunky functions thansetTimeout andsetInterval, you can wrap them in functions that just reverse the order of the arguments and give them nice names:

function after(ms, fn){ setTimeout(fn, ms); }function every(ms, fn){ setInterval(fn, ms); }

CoffeeScript versions:

after = (ms, fn)-> setTimeout fn, msevery = (ms, fn)-> setInterval fn, ms

You can then use them nicely with anonymous functions:

after(1000, function(){    console.log("it's been a second");    after(1000, function(){        console.log("it's been another second");    });});

Now it reads easily as "after N milliseconds, ..." (or "every N milliseconds, ...")

I suggest this method for former python developers

const sleep = (time) => new Promise((resolve) => setTimeout(resolve, Math.ceil(time * 1000)))

Usage:

await sleep(10) // for 10 seconds

• javascript
• sleep