How to make JavaScript sleep or wait

Overview

JavaScript does not have a sleep() function which would cause code to wait for a specified period of time before resuming execution. If you need JavaScript to wait, how do you do it?

Let's say you want to log three messages to the Javascript console, with a one-second delay between each message. There is no sleep() method in JavaScript, so you can try using the next best method, setTimeout().

Unfortunately, setTimeout() doesn't work quite as you might expect, depending on how you use it. You’ve probably tried this at some point in your JavaScript loop and seen that setTimeout() simply doesn’t seem to work.

The problem arises from misinterpreting setTimeout() as a sleep() function, when in fact it works according to its own set of rules.

Looking through the documentation for setTimeout(), it appears to require a "delay" parameter, in milliseconds.

Back to the original problem, you tried calling setTimeout(1000) to wait 1 second between two calls to the console.log() function.

Unfortunately setTimeout() doesn't work this way:

setTimeout(1000)
console.log(1)
setTimeout(1000)
console.log(2)
setTimeout(1000)
console.log(3)

for (let i = 0; i <= 3; i++) {
  setTimeout(1000)
  console.log(`#${i}`)
}

This code results in no delay at all, just as if setTimeout() didn't exist.

Looking back at the documentation, you'll see that the problem is that the first argument should actually be a function call, not a delay. After all, setTimeout() is not actually a sleep() method.

You rewrite the code to take a callback function as the first argument and the required delay as the second argument:

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 1000)
setTimeout(() => console.log(3), 1000)

for (let i = 0; i <= 3; i++) {
  setTimeout(() => console.log(`#${i}`), 1000)
}

In this way, the log information of the three console.log calls will be displayed together after a single delay of 1000ms (1 second), instead of the ideal effect of a 1-second delay between each repeated call.

Before we discuss how to fix this problem, let's look at the setTimeout() function in more detail.

Checking setTimeout()

You may have noticed the use of arrow functions in the second code snippet above. These are required because you need to pass an anonymous callback function to setTimeout() which will run the code to be executed after the timeout.

In an anonymous function, you can specify arbitrary code to be executed after the timeout period:

// Anonymous callback function using arrow syntax.
setTimeout(() => console.log("Hello!"), 1000)
// This is equivalent to using the function keyword setTimeout(function() { console.log("Hello!") }, 1000)

In theory, you could just pass the function as the first argument and the callback's arguments as the remaining arguments, but this never seems to work correctly for me:

// Should work, but not setTimeout(console.log, 1000, "Hello")

People use strings to solve this problem, but it is not recommended. Executing JavaScript from a string has security implications because any bad actor can run arbitrary code injected as a string.

// Shouldn't work, but it does work setTimeout(`console.log("Hello")`, 1000)

So why did setTimeout() fail in our first set of code examples? It seems like we are using it correctly, the 1000ms delay is repeated every time.

The reason is that setTimeout() executes as synchronous code, and multiple calls to setTimeout() run simultaneously. Each call to setTimeout() creates asynchronous code that will be executed later, after the given delay. Since each delay in the code snippet is the same (1000 milliseconds), all queued code will run simultaneously after a single delay of 1 second.

As mentioned before, setTimeout() is not actually a sleep() function; instead, it simply queues asynchronous code for later execution. Fortunately, you can create your own sleep() function in JavaScript using setTimeout().

How to write a sleep function

With the power of Promises, async, and await, you can write a sleep() function that will behave as expected.

However, you can only call this custom sleep() function from within an async function, and you need to use it with the await keyword.

This code demonstrates how to write a sleep() function:

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

const repeatedGreetings = async () => {
  await sleep(1000)
  console.log(1)
  await sleep(1000)
  console.log(2)
  await sleep(1000)
  console.log(3)
}
repeatedGreetings()

This JavaScript sleep() function works exactly as you would expect, because await causes the synchronous execution of your code to pause until the Promise is resolved.

A simple choice

Alternatively, you can specify an incremental timeout in the first call to setTimeout().

The following code is equivalent to the previous example:

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 2000)
setTimeout(() => console.log(3), 3000)

Using increasing timeout works because the code is executed concurrently, so the specified callback function will be executed after 1, 2 and 3 seconds of the synchronous code execution.

Will it run in a loop?

As you might expect, both options for pausing JavaScript execution work fine inside a loop. Let's look at two simple examples.

Here is a code snippet using a custom sleep() function:

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

async function repeatGreetingsLoop() {
  for (let i = 0; i <= 5; i++) {
      await sleep(1000)
    console.log(`Hello #${i}`)
    }
}
repeatGreetingsLoop()

Here is a simple code snippet using increasing timeout:

for (let i = 0; i <= 5; i++) {
  setTimeout(() => console.log(`Hello #${i}`), 1000 * i)
}

I prefer the latter syntax, especially for use in loops.

Summarize

JavaScript may not have a sleep() or wait() function, but it's easy to create one using the built-in setTimeout() function, as long as you use it with caution.

By itself, setTimeout() cannot be used as a sleep() function, but you can create a custom JavaScript sleep() function using async and await.

Taking a different approach, you can pass staggered (increasing) timeouts to setTimeout() to emulate the sleep() function. This works because all calls to setTimeout() are executed synchronously, as JavaScript usually does.

Hopefully this helps you introduce some latency into your code — using only vanilla JavaScript, without the need for external libraries or frameworks.

The above is the details of how to make JavaScript sleep or wait. For more information about JavaScript sleep or wait, please pay attention to other related articles on 123WORDPRESS.COM!