Delay, Sleep, Pause & Wait in JavaScript — SitePoint

Many programming languages have a sleep operate that can delay a program’s execution for a given variety of seconds. JavaScript lacks this built-in function, however to not fear. On this article, we’ll discover numerous strategies to implement delays in your JavaScript code, preserving in thoughts the language’s asynchronous nature.

How you can Create a Sleep Operate in JavaScript

For these of you who’re right here for a fast repair and don’t wish to dive into the technical particulars, we’ve bought you lined. Right here’s probably the most easy manner so as to add a sleep operate to your JavaScript toolbox:

operate sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

console.log('Hiya');
sleep(2000).then(() => { console.log('World!'); });

Run this code, and also you’ll see “Hiya” pop up in your console. Then, after a quick two-second pause, “World!” will comply with. It’s a neat and efficient solution to introduce a delay with out breaking a sweat.

If that is all you got here for, improbable! However in case you’re curious in regards to the “why” and the “how”, there’s extra to study. There are nuances and intricacies in coping with time in JavaScript that you just may discover helpful. So, learn on to seek out out extra!

Understanding JavaScript’s Execution Mannequin

Now that we’ve bought a fast answer below our belts, let’s delve into the mechanics of JavaScript’s execution mannequin. Understanding that is essential for successfully managing time and asynchronous operations in your code.

Take into account the next Ruby code:

require 'web/http'
require 'json'

url = 'https://api.github.com/customers/jameshibbard'
uri = URI(url)
response = JSON.parse(Internet::HTTP.get(uri))
places response['public_repos']
places 'Hiya!'

As one may count on, this code makes a request to the GitHub API to fetch my person knowledge. It then parses the response, outputs the variety of public repos attributed to my GitHub account and eventually prints “Hiya!” to the display. Execution goes from prime to backside.

Distinction that with the equal JavaScript model:

fetch('https://api.github.com/customers/jameshibbard')
  .then(res => res.json())
  .then(json => console.log(json.public_repos));
console.log('Hiya!');

If you happen to run this code, it’s going to output “Hiya!” to the display, then the variety of public repos attributed to my GitHub account.

It’s because fetching knowledge from an API is an asynchronous operation in JavaScript. The JavaScript interpreter will encounter the fetch command and dispatch the request. It’ll not, nonetheless, watch for the request to finish. Relatively, it’s going to proceed on its manner, output “Hiya!” to the console, after which when the request returns a few hundred milliseconds later, it’s going to output the variety of repos.

If any of that is information to you, it is best to watch this glorious convention discuss: What the heck is the occasion loop anyway?

How you can Use SetTimeout in JavaScript Correctly

Now that we now have a greater understanding of JavaScript’s execution mannequin, let’s take a look at how JavaScript handles delays and asynchronous code.

The usual manner of making a delay in JavaScript is to make use of its setTimeout methodology. For instance:

console.log('Hiya');
setTimeout(() => {  console.log('World!'); }, 2000);

This may log “Hiya” to the console, then after two seconds “World!” And in lots of instances, that is sufficient: do one thing, then, after a brief delay, do one thing else. Sorted!

However sadly issues aren’t all the time that straightforward.

You may assume that setTimeout pauses the entire program, however that’s not the case. It’s an asynchronous operate, which suggests the remainder of your code received’t watch for it to finish.

For instance, say you run this:

console.log('Hiya');
setTimeout(() => { console.log('World!'); }, 2000);
console.log('Goodbye!');

You’ll see the next output:

Hiya
Goodbye!
World!

Discover how “Goodbye!” seems earlier than “World!”? That’s as a result of setTimeout doesn’t block the remainder of the code from executing.

This implies that you may’t do that:

console.log('Hiya');
setTimeout(1000);
console.log('World');

“Hiya” and “World” will instantly be logged to the console with no noticeable delay occurring in between.

You can also’t do that:

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

Take a second to think about what may occur within the above code snippet.

It received’t print the numbers 0 to 4 with a delay of 1 second between every. Relatively, what you’ll truly get is 5 4s printed all of sudden after 4 seconds. Why? As a result of the loop doesn’t pause execution. It doesn’t watch for setTimeout to finish earlier than transferring on to the following iteration.

So what’s setTimeout truly good for? Let’s have a look at that now.

setTimeout() Operate Analyzing and Finest Practices

As you may learn in our setTimeout tutorial, the native JavaScript setTimeout operate calls a operate or executes a code snippet after a specified delay (in milliseconds).

This could be helpful if, for instance, you wished to show a popup after a customer has been looking your web page for a sure period of time, otherwise you desire a brief delay earlier than eradicating a hover impact from a component (in case the person by accident moused out).

The setTimeout methodology accepts a reference to a operate as the primary argument.

This may be the identify of a operate:

operate greet(){
  alert('Howdy!');
}
setTimeout(greet, 2000);

It may be a variable that refers to a operate (a operate expression):

const greet = operate(){
  alert('Howdy!');
};
setTimeout(greet, 2000);

Or it may be an nameless operate (on this case an arrow operate):

setTimeout(() => { alert('Howdy!'); }, 2000);

It’s additionally attainable to move setTimeout a string of code for it to execute:

setTimeout('alert('Howdy!');', 2000);

Nevertheless, this methodology is just not advisable, as:

• it’s onerous to learn (and thus onerous to take care of and/or debug)
• it makes use of an implied eval, which is a possible safety threat
• it’s slower than the alternate options, because it has to invoke the JS interpreter

As talked about, setTimeout is nice for firing a one-off motion after a delay, however it’s additionally attainable to make use of setTimeout (or its cousin setInterval) to maintain JavaScript ready till a situation is met. For instance, right here’s the way you may use setTimeout to attend for a sure aspect to look on an online web page:

operate pollDOM () {
  const el = doc.querySelector('my-element');

  if (el.size) {
    
  } else {
    setTimeout(pollDOM, 300); 
  }
}

pollDOM();

This assumes the aspect will flip up in some unspecified time in the future. If you happen to’re unsure that’s the case, you’ll want to take a look at canceling the timer (utilizing clearTimeout or clearInterval).

Growing Timeouts as Various to Sleep Operate in JavaScript

Generally, you may end up eager to introduce delays in a sequence of operations. When you may use numerous strategies to emulate a sleep operate, there’s one other strategy that’s typically ignored: incrementally rising timeouts.

The thought is straightforward: as a substitute of pausing the whole execution thread, you increment the delay for every subsequent operation utilizing setTimeout. This lets you create a sequence of delayed actions with out blocking the browser or compromising the person expertise.

Right here’s a fast instance as an example:

let delay = 1000; 

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(`That is message ${i + 1}`);
  }, delay);

  delay += 1000; 
}

On this instance, the primary message will seem after 1 second, the second after 2 seconds, and so forth, as much as the fifth message after 5 seconds.

Some great benefits of this methodology are that it’s non-blocking, straightforward to implement, and doesn’t require information of guarantees or async/await. Nevertheless, it isn’t appropriate for complicated asynchronous operations that require exact timing or error dealing with.

Circulation Management in Trendy JavaScript

It’s typically the case when writing JavaScript that we have to watch for one thing to occur (for instance, knowledge to be fetched from an API), then do one thing in response (equivalent to replace the UI to show the information).

The instance above makes use of an nameless callback operate for this objective, but when it’s worthwhile to watch for a number of issues to occur, the syntax rapidly will get fairly gnarly and you find yourself in callback hell.

Fortunately, the language has advanced significantly over the previous few years and now gives us new constructs to keep away from this.

For instance, utilizing async await we will rewrite the preliminary code to fetch info from the GitHub API:

(async () => {
  const res = await fetch(`https://api.github.com/customers/jameshibbard`);
  const json = await res.json();
  console.log(json.public_repos);
  console.log('Hiya!');
})();

Now the code executes from prime to backside. The JavaScript interpreter waits for the community request to finish and the variety of public repos is logged first, then the “Hiya!” message.

If that is extra the form of factor you’re attempting to perform, I encourage you to learn our article Circulation Management in Trendy JS: Callbacks to Guarantees to Async/Await.

Bringing Sleep to Native JavaScript

If you happen to’re nonetheless with me, then I suppose you’re fairly set on blocking that execution thread and making JavaScript wait it out.

Right here’s the way you may do this:

operate sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } whereas (currentDate - date < milliseconds);
}

console.log('Hiya');
sleep(2000);
console.log('World!');

As anticipated, it will log “Hiya”, pause for 2 seconds, then log “World!”

It really works through the use of the Date.now methodology to get the variety of milliseconds which have elapsed since January 1, 1970 and assigning that worth to a date variable. It then creates an empty currentDate variable, earlier than getting into a do ... whereas loop. Within the loop it repeatedly will get the variety of milliseconds which have elapsed since January 1, 1970 and assigns the worth to the beforehand declared currentDate variable. The loop will preserve going whereas the distinction between date and currentDate is lower than the specified delay in milliseconds.

Job finished, proper? Properly, not fairly …

How you can Write Higher Sleep Operate in JavaScript

Perhaps this code does precisely what you’re hoping for, however remember that it has a big drawback: the loop will block JavaScript’s execution thread and be sure that no person can work together together with your program till it finishes. If you happen to want a big delay, there’s an opportunity that it could even crash issues altogether.

So what to do?

Properly, it’s additionally attainable to mix the strategies discovered earlier within the article to make a much less intrusive sleep methodology:

operate sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

console.log('Hiya');
sleep(2000).then(() => { console.log('World!'); });

This code will log “Hiya”, wait for 2 seconds, then log “World!” Below the hood, we’re utilizing the setTimeout methodology to resolve a promise after a given variety of milliseconds.

Discover that we have to use a then callback to verify the second message is logged with a delay. We are able to additionally chain extra callback capabilities onto the primary:

console.log('Hiya');
sleep(2000)
  .then(() => { console.log('World!'); })
  .then(() => {
    sleep(2000)
      .then(() => { console.log('Goodbye!'); })
    });

This works, however it appears to be like ugly. We are able to fairly it up utilizing async ... await:

operate sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async operate delayedGreeting() {
  console.log('Hiya');
  await sleep(2000);
  console.log('World!');
  await sleep(2000);
  console.log('Goodbye!');
}

delayedGreeting();

This appears to be like nicer, however it signifies that no matter code is utilizing the sleep operate must be marked as async.

In fact, each of those strategies nonetheless have the drawback (or function) that they don’t pause the whole program execution. Solely your operate sleeps:

operate sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async operate delayedGreeting() {
  console.log('Hiya');
  await sleep(2000); 
  console.log('World!');
}

delayedGreeting();
console.log('Goodbye!');

The code above logs the next:

Hiya
Goodbye!
World!

Finest Practices for Making a JavaScript Sleep Operate

We’ve explored numerous methods to introduce delays in JavaScript. Now let’s recap on which methodology is greatest fitted to completely different situations, and which one it is best to typically keep away from.

1. Plain setTimeout

console.log('Hiya');
setTimeout(() => { console.log('World!'); }, 2000);

• 👍 Execs: Easy to grasp, non-blocking.
• 👎 Cons: Provides restricted management over asynchronous operations.
• 📝 When to Use: Good for easy, one-off delays, or primary polling.

2. Incremental setTimeout

setTimeout(() => { console.log('Hiya'); }, 1000);
setTimeout(() => { console.log('World!'); }, 2000);

• 👍 Execs: Non-blocking, straightforward to implement, and doesn’t require information of guarantees or async/await.
• 👎 Cons: Not appropriate for complicated async operations. No error dealing with.
• 📝 When to Use: Helpful for easy sequences with a delay between every step.

3. Blocking the Occasion Loop with a Loop

console.log('Hiya');
const date = Date.now();
let currentDate = null;
do {
  currentDate = Date.now();
} whereas (currentDate - date < 2000);
console.log('World!');

• 👍 Execs: Mimics conventional sleep habits.
• 👎 Cons: Blocks the whole thread, can freeze the UI or crash this system.
• ⚠️ Strongly Discouraged: Solely use this in case you completely must halt execution and are conscious of the dangers.

4. Utilizing Guarantees with setTimeout

const sleep = operate(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
console.log('Hiya');
sleep(2000).then(() => { console.log('World!'); });

• 👍 Execs: Non-blocking, extra management over asynchronous operations.
• 👎 Cons: Requires understanding of guarantees. Longer promise chains can get a bit messy.
• 📝 When to Use: Whenever you want extra management over timing and asynchronous operations.

5. Utilizing async/await with Guarantees

operate sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async operate delayedGreeting() {
  console.log('Hiya');
  await sleep(2000);
  console.log('World!');
  await sleep(2000);
  console.log('Goodbye!');
}

delayedGreeting();

• 👍 Execs: Clear syntax, straightforward to learn, non-blocking.
• 👎 Cons: Requires understanding of async/await and guarantees. Requires “wrapping” operate outdoors of modules.
• ✅ Strongly Really helpful: That is probably the most trendy and clear strategy, particularly when coping with a number of asynchronous operations.

Conclusion

Timing points in JavaScript are the reason for many a developer headache, and the way you cope with them will depend on what you’re attempting to attain.

Though a sleep operate is current in lots of different languages, I’d encourage you to embrace JavaScript’s asynchronous nature and check out to not battle the language. It’s truly fairly good whenever you get used to it.

If in case you have any questions, please head over to the SitePoint boards and begin a dialogue.

FAQs About Sleep, Pause & Wait Capabilities in JavaScript

Listed below are some steadily requested questions on creating delays in JavaScript.

async operate sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

for (let i = 0; i < 5; i++) {
  console.log(`Loop depend: ${i}`);
  await sleep(1000); 
}

setTimeout(() => { console.log('1 second handed'); }, 1000);

await new Promise(resolve => setTimeout(resolve, 1000))
  .then(() => { console.log('1 second handed'); });

setTimeout(() => { console.log('5 seconds handed'); }, 5000);

await new Promise(resolve => setTimeout(resolve, 5000))
  .then(() => { console.log('5 seconds handed'); });

setTimeout(() => {  }, timeInMilliseconds);