(Check out the latest answer for 2016)

In the realm of coding, it is completely understandable to desire to execute a task, pause, and then continue with another task. If you have experience with multi-threaded languages, you may be accustomed to the concept of pausing execution for a specific duration until your thread resumes.

However, the challenge lies in the fact that JavaScript operates on a single-threaded event-based system. While it might seem convenient to have the entire engine halt for a few seconds in certain scenarios, it is generally considered poor practice. Imagine if I wanted to utilize your functions while developing my own? Invoking your method would cause all my functions to freeze. Unless JavaScript could somehow retain your function's execution context, save it somewhere, later restore it, and then continue, implementing sleep behavior would essentially introduce threading.

Therefore, the options available are limited, and following the suggestions provided by others is the way to go – splitting your code into multiple functions.

Given the nature of JavaScript, your question presents a false dilemma. The desired sleep functionality cannot be achieved in the manner you envision, and pursuing such a solution is not recommended.

When working with JavaScript, I always prioritize optimizing my functions to complete as quickly as possible. This allows the browser to regain control promptly and efficiently handle DOM changes.

The concept of including a pause or delay function in code remains a topic of discussion in various programming communities. Some developers advocate for implementing signals or callbacks to trigger specific actions, while others find value in incorporating occasional pauses for various reasons. Personally, I believe that the approach to such implementations should be flexible and context-dependent, as rigid rules rarely hold true in the dynamic field of software development.

Crafting a sleep function can be straightforward, especially with the support of JavaScript Promises:

// Define a function to pause execution for a specified duration in milliseconds
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

// Utilizing the sleep function
sleep(500).then(() => {
    // Execute desired actions after the designated pause
});

Within an async function, utilizing the await keyword in conjunction with the sleep() function allows for a structured pause in execution:

// Use within async functions:
await sleep(500);

// Carry out tasks following the pause…

When using Firebug (and possibly other JavaScript consoles), nothing will happen immediately after pressing enter, only after the specified sleep duration (...)

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

Here is an example of how to use it:

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: Intended for debugging and development purposes only

I echo the sentiments of the previous commenters. Trying to implement a sleep function in JavaScript can be a detrimental choice.

While setTimeout may seem like a viable alternative, it's important to note that it doesn't actually pause the execution of the script. Instead, it schedules the next line of code to run after a specified delay. This means it doesn't mimic the behavior of a traditional sleep function.

To achieve a similar outcome, it's recommended to break down your function into distinct before and after sections.

function doStuff()
{
  // Perform initial tasks
  setTimeout(continueExecution, 10000) // Pause for ten seconds before proceeding
}

function continueExecution()
{
   // Complete remaining tasks after the pause
}

Ensure that your function names accurately reflect their respective responsibilities (e.g., CollectDataThenWait and VerifyData, instead of functionPart1 and functionPart2).

This approach effectively delays the execution of selected code until after the timeout has elapsed, while still allowing the client PC to carry out other tasks in the meantime.

It's worth noting, as mentioned in the comments, that this method won't function correctly within a loop. While it's technically possible to implement workarounds, it often results in convoluted and error-prone code.

Please refrain from creating a busy-wait sleep function in the name of $DEITY. setTimeout and setInterval are more than capable of handling the task at hand.

var toggleText = document.getElementById('toggleText');
setInterval(() => {
    toggleText.style.display = "block";
    setTimeout(() => {
        toggleText.style.display = "none"
    }, 1000);
}, 2000);   

<div id="toggleText">Hello! Goodbye!</div>

Hide the text for one second every two seconds. This example demonstrates the usage of setInterval and setTimeout to toggle the visibility of text every second.

For those of us using JavaScript in conjunction with the Rhino engine, there is a solution...

try
{
  java.lang.Thread.sleep(timeInMilliseconds);
}
catch (e)
{
  /*
   * If the sleep is interrupted, you may need to assess if enough time has elapsed
   * and possibly call for the sleep method again - depending on the importance
   * of the sleep duration to your operations.
   */
}

Implement the following code snippet:

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

within a function that is asynchronous.

If you happen to be working with jQuery, there is a handy "delay" plugin that was developed specifically for this purpose:

// Custom Delay Plugin for jQuery
// - http://www.johndoe.com
// - © 2021 John Doe

jQuery.fn.delay = function(timer, callback){
    this.each(function(){
        setTimeout(callback, timer);
    });

    return this;
};

Using the plugin is as simple as chaining it with other function calls:

$('#header')
.addClass('highlight')
.delay(500)
.removeClass('highlight');

1. Here is a simple way to create a sleep function in JavaScript:

   Define async sleep function like this:

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

   and then you can use it by calling:

   await sleep(1000) // This will sleep for 1 second
   

2. Bun.js has a built-in sleep function as well:

   await Bun.sleep(1000) // This will also sleep for 1 second
   

   For more information, visit:

3. If you are using Node.js, you can utilize the promisified version of setTimeout() since Node.js 16+:

   Simply import it like this:

   import {setTimeout} from 'timers/promises'
   
   await setTimeout(1000) // This will also sleep for 1 second
   

   For more details, check out: https://nodejs.org/api/timers.html#timerspromisessettimeoutdelay-value-options

Looking for a way to handle sleep in JavaScript? I came across this helpful article that provides some solutions:

JavaScript sleep() or wait()

There's also another interesting article on client-side solutions available here: JavaScript sleep

And remember, using alert() will pause your code execution until the alert is dismissed - try to find a workaround for the same effect without displaying alerts. :)

Here is a simple development utility function for creating a basic sleep function in JavaScript. It is important to note that this function should not be used on live websites as it may cause performance issues. Remember, always code responsibly!

// Simple sleep function based on milliseconds.
// WARNING: Not suitable for production websites.
function sleep(ms) {
    var startTime = new Date().getTime();
    while(new Date().getTime() < startTime + ms) {}
}

Here is a straightforward method utilizing a synchronous fetch request:

function pause(time){
  var request = new XMLHttpRequest();
  request.open('GET', '/pause.php?t=' + time, false);  
  request.send(null);
}

Contents of the file pause.php:

<?php pause($_GET['t']);

Now you can use it like this:

pause(10);

Utilizing an existing server setup

If you do not have your own backend server (for the above PHP code), you can utilize an online service. For example:

function pause(time) { 
    var request = new XMLHttpRequest();
    request.open('GET', 'http://httpstat.us/200?pause=' + time, false);
    request.send(null);
};

pause(2000);
console.log("Two-second delay completed.");

Clarification

Regarding using false for the asynchronous parameter, mdn states:

Synchronous requests on the main thread can disrupt the user experience and are discouraged; in fact, many browsers have deprecated synchronous XHR support on the main thread altogether. Synchronous requests are allowed in Workers.

Actual Waiting Period

The specified time in milliseconds will be the duration that the server waits between receiving the request and sending the response. Additional delay caused by network transmission and server processing will be included in this timeframe.

Latest Information using Atomics.wait

This code is compatible with Node.js version 9.3 and above.

I was in need of an accurate timer for Node.js tasks, and this method proved to be very effective.

However, it appears that browser support for this feature is quite limited.

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

I conducted several 10-second timer tests.

Using setTimeout, the margin of error was found to be up to 7000 microseconds (7 ms).

On the other hand, with Atomics, the error margin seems to remain under 600 microseconds (0.6 ms).

2020 Update: Recap

function sleep(millis){ // Requires assistance 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){ // Recommended for async functions only
  let netMillis = Math.max(millis-1, 0); // Assuming 1 ms overhead
  return new Promise((resolve) => {
    setTimeout(resolve, netMillis);
  });
}
function sleepSync(millis){ // Designed for worker threads, currently supported in 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);
}

For those using a server-side page like sleep.jsp, the code snippet would resemble:

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

The concept of inlining:

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

In this code snippet, the value 500 represents the time in milliseconds that the Virtual Machine (VM) will pause before moving on to the next line of code.

In summary;

Essentially, when you create a promise, it returns an observable entity and during creation provides a reference to resolve in a callback for handing over data or response once it becomes available. In this scenario, resolve is invoked via the setTimeout function after a 500ms delay. This results in the external scope being blocked until the resolve is executed, thereby simulating a blocking behavior. This is distinct from non-blocking operations or non-thread-reserving sleep mechanisms found in other programming languages, as it effectively halts the thread, potentially impacting the UI and concurrent tasks in a webpage or node application, by dedicating the main thread exclusively to await the resolution of the promise.

At the beginning:

Start by defining a function you want to run:

function greetWorld(){
  console.log("Hello, World!");
}

Next, set a timer for when you want the function to execute using the setTimeout method:

setTimeout(greetWorld, 1000)

Remember:

• The second argument represents time in milliseconds
• When passing the function as the first argument, only use the name of the function without the parentheses

Here is a concise solution that requires no external dependencies:

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

An alternative approach to achieving the desired appearance is by utilizing an anonymous function:

alert('initiating');
var x = 'bar';
// Extensive code
setTimeout(function(){  // Commencement of code execution post delay
    alert(x);
    // Additional code
}, 5000);  // Specify the delay here

It's likely the most straightforward solution to fulfill your requirements.

Keep in mind, if you require multiple delays, the approach could become complex quickly, prompting a review of your overall design.

The setTimeout function belongs to the JavaScript asynchronous methods category. These methods initiate execution and their outcomes are queued for the future in a component known as the callback queue, to be executed at a later stage.

If you wish to proceed, you can encapsulate the setTimeout function within a Promise.

Here is an example using promises:

const sleep = time => new Promise(res => setTimeout(res, time, "done sleeping"));

// using native promises
sleep(2000).then(msg => console.log(msg));

And here is an example using async/await:

const sleep = time => new Promise(res => setTimeout(res, time, "done sleeping"));

// using async/await at the top level
(async function(){
  const msg = await sleep(2000);
  console.log(msg);
})();

To learn more about setTimeout, click the link.

Single-line utilizing Promises

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

Type-safe with Termination Signal

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

Example

const wait = t => new Promise(s => setTimeout(s, t));
// Implementation
async function example() {
    // Moving down
    let i = 8;
    while (i--) {
        await wait(1000);
        console.log(i);
    }
    // Total of numbers 0 to 7 using 1-second intervals
    const total = await [...Array(8).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("total", total);
}
example();

To ensure consistency with other asynchronous tasks, I prefer wrapping setTimeOut in a Promise. See a live demonstration in this Fiddle

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

Here is an example of how to use it:

delay(3000).then(function() {
   // Execute desired code after delay
});

By utilizing Promises, the syntax is easy to grasp for those familiar with asynchronous tasks.

This solution is specifically tailored for Node 18 and later versions!

Forget about the old way of waiting:

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

Now, with the latest update, we can simplify it to:

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

When it comes to web browsers, I believe that utilizing setTimeout and setInterval is the best approach.

However, when working with server-side code, there may be a need for a blocking function to ensure proper thread synchronization.

For those using technologies like Node.js and Meteor, running into limitations with setTimeout in a fiber is not uncommon. In such cases, the following server-side sleep code can be helpful:

var Fiber = require('fibers');

function sleep(ms) {
    var fiber = Fiber.current;
    setTimeout(function() {
        fiber.run();
    }, ms);
    Fiber.yield();
}

Fiber(function() {
    console.log('Waiting... ' + new Date);
    sleep(1000);
    console.log('Done... ' + new Date);
}).run();
console.log('Back in the main thread');

For more information, check out: Node.js Fibers, Sleep

Many misconceptions exist in the responses provided here. JavaScript does not have to be single threaded, and in reality, it is not. Mainstream browsers now support workers, expanding the capabilities of JavaScript. Previously, other JavaScript runtimes such as Rhino and Node.js enabled multithreading.

The statement 'JavaScript is single threaded' is not entirely accurate. For example, executing a sleep function within a worker does not obstruct any code running in the user interface thread.

Newer runtimes that support generators and yield offer similar functionality to a sleep function in a single-threaded environment:

// This example is based on the latest ES6 drafts.
// Syntax for JavaScript 1.7+ (SpiderMonkey/Firefox 2+) may differ

// Insert code to be delayed here (remove star if using JavaScript 1.7)
function* main(){
    for (var i = 0; i < 10; i++) {
        // To delay for 10 milliseconds 10 times consecutively
        yield 10;
    }

    yield 5;
    console.log('I just delayed for 5 milliseconds!');
}

// Resume the specified generator after ms milliseconds
function resume(ms, generator){
    setTimeout(function(){
        // Omit .value if using JavaScript 1.7
        var nextDelay = generator.next().value;
        resume(nextDelay, generator);
    }, ms);
}

// Initialize a generator and obtain the initial delay for the recursive function
var
    generator = main(),
    firstDelay = generator.next().value;

// Initialize the recursive resume function
resume(firstDelay, generator);

This simulated sleep function behaves differently from an actual sleep function as it does not impede the thread. It merely enhances JavaScript's existing setTimeout function. This functionality has been incorporated in Task.js and is functional in current versions of Firefox.

UPDATE 2023

This snippet of code will do the trick.

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

Ever since Node.js version 7.6, it has been possible to merge the promisify function from the utils module with setTimeout.

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

Common Usage

async function start() {
    console.time("Took a nap for")
    await nap(3000)
    console.timeEnd("Took a nap for")
}

start()

Query Usage

async function asyncProcessor() {
    while (continueOperation) {
      var fileList = await listFiles(nextPageToken);
      await nap(3000)
      var parents = await requestParents(fileList);
    }
  }

My extensive search on JavaScript sleep/wait led me to various webpages, yet I found no solution for achieving a "RUN, DELAY, RUN" sequence. Most resources offered either a "RUN, RUN(useless stuff), RUN" approach or a "RUN, RUN + delayed RUN" scenario.

After giving it some thought, I came up with a solution that involves breaking down your code into segments. While this may just be a more readable refactoring, it does the trick.

Example 1:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
// JavaScript sleep function by "therealdealsince1982"; copyrighted 2009
// Using setInterval
var i = 0;

function run() {
    // Code segments to run
    if (i == 0){document.getElementById("id1").innerHTML= "<p>code segment " + i + " is ran</p>"; }
    // More code segments here...
    if (i == 5){document.getElementById("id1").innerHTML= "<p>all code segment finished running</p>"; clearInterval(t); } // End interval, stops run
    i++; // Move to the next code segment
}

run();
t = setInterval("run()", 1000);

</script>
</body>
</html>

Example 2:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
// JavaScript sleep function by "therealdealsince1982"; copyrighted 2009
// Using setTimeout
var i = 0;

function run() {
    // Code segments to run with delays
    if (i == 0){document.getElementById("id1").innerHTML= "<p>code segment " + i + " ran</p>"; sleep(1000);}
    // More code segments here...
    if (i == 3){document.getElementById("id1").innerHTML= "<p>code segment " + i + " ran</p>";} //stops automatically
    i++;
}

function sleep(dur) {t=setTimeout("run()", dur);} // Resume control flow after delay

run(); // Start execution
</script>
</body>
</html>

Example 3:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
// JavaScript sleep function by "therealdealsince1982"; copyrighted 2009
// Using setTimeout
var i = 0;

function flow() {
    run(i);
    i++;
    sleep(1000);
    if (i == 5) {clearTimeout(t);} // Stop execution
}

function run(segment) {
    // Code segments to run
    if (segment == 0){document.getElementById("id1").innerHTML= "<p>code segment " + segment + " is ran</p>"; }
    // More code segments here...
    if (segment >2){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
}

function sleep(dur) {t=setTimeout("flow()", dur);} // Resume control flow after delay

flow(); // Start execution
</script>
</body>
</html>

Example 4:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
// JavaScript sleep function by "therealdealsince1982"; copyrighted 2009
// Using setTimeout and switch
var i = 0;

function flow() {
    switch(i)
    {
        case 0:
            run(i);
            sleep(1000);
            break;
        // More cases here...
        case 5:
            run(i);
            clearTimeout(t); // Stop execution
            break;
        default:
            run(i);
            sleep(3000);
            break;
    }
}

function run(segment) {
    // Code segments to run using switch statement
    if (segment == 0){document.getElementById("id1").innerHTML= "<p>code segment " + segment + " is ran</p>"; }
    // More code segments here...
    i++; // Move to the next segment
}

function sleep(dur) {t=setTimeout("flow()", dur);} // Resume control flow after delay

flow(); // Start execution
</script>
</body>
</html>

function pauseTime(timeInMilliseconds) {
  var start = new Date().getTime();
  for (var count = 0; count < 1e7; count++) {
    if ((new Date().getTime() - start) > timeInMilliseconds){
      break;
    }
  }
}

To have more streamlined functions compared to using setTimeout and setInterval, you can create functions that simply switch the order of the arguments and provide more user-friendly names:

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

For those using CoffeeScript, here are the equivalent versions:

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

These can be used effectively with anonymous functions like this:

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

Now, it becomes easier to understand as "after N milliseconds, ..." or "every N milliseconds, ..."

When dealing with synchronous execution, the use of a sleep function becomes clear. Functions like setInterval and setTimeout introduce a parallel execution thread that interrupts the main program's sequence, which may not be ideal when waiting for a specific result. While events and handlers can be used as alternatives, they may not always align with the intended purpose in certain scenarios.