Delay, Sleep, Pause & Wait in JavaScript — SitePoint

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

The best way to Create a Sleep Perform in JavaScript

For these of you who’re right here for a fast repair and don’t need to dive into the technical particulars, we’ve acquired you lined. Right here’s essentially the most simple means so as to add a sleep perform to your JavaScript toolbox:

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

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

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

If that is all you got here for, improbable! However should you’re curious concerning the “why” and the “how”, there’s extra to be taught. There are nuances and intricacies in coping with time in JavaScript that you just would possibly discover helpful. So, learn on to search out out extra!

Understanding JavaScript’s Execution Mannequin

Now that we’ve acquired a fast answer underneath 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.

Think about the next Ruby code:

require 'internet/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 'Howdy!'

As one would possibly 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 “Howdy!” to the display. Execution goes from high 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('Howdy!');

When you run this code, it’ll output “Howdy!” 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, nevertheless, watch for the request to finish. Relatively, it’ll proceed on its means, output “Howdy!” to the console, after which when the request returns a few hundred milliseconds later, it’ll output the variety of repos.

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

The best way to Use SetTimeout in JavaScript Correctly

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

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

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

This might log “Howdy” 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 at all times that straightforward.

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

For instance, say you run this:

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

You’ll see the next output:

Howdy
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 which you can’t do that:

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

“Howdy” 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  { console.log(i); }, 1000);
}

Take a second to contemplate what would possibly occur within the above code snippet.

It gained’t print the numbers 0 to 4 with a delay of 1 second between every. ather, the numbers 0 to 4 shall be logged to the console concurrently after a delay of 1 second. 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.

To acquire the specified output, we have to regulate the delay in setTimeout to i * 1000 milliseconds.

for (let i = 0; i  { console.log(i); }, i * 1000);
}

This staggers the execution of the console.log statements, guaranteeing a one-second interval between every output.

The important thing takeaway right here is that setTimeout doesn’t block a program’s execution, slightly the JavaScript interpreter will transfer on to course of the remainder of the code and solely come again to execute the callback perform as soon as the timer expires.

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

setTimeout() Perform Analyzing and Finest Practices

As you’ll be able to learn in our setTimeout tutorial, the native JavaScript setTimeout perform calls a perform or executes a code snippet after a specified delay (in milliseconds).

This is perhaps 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 need a quick delay earlier than eradicating a hover impact from a component (in case the person unintentionally moused out).

The setTimeout technique accepts a reference to a perform as the primary argument.

This may be the identify of a perform:

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

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

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

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

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

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

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

Nonetheless, this technique 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 would possibly use setTimeout to attend for a sure aspect to look on an online web page:

perform 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. When you’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 Perform in JavaScript

Generally, you would possibly end up eager to introduce delays in a sequence of operations. Whilst you may use varied strategies to emulate a sleep perform, there’s one other strategy that’s usually ignored: incrementally growing timeouts.

The thought is straightforward: as an alternative of pausing the complete 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 technique are that it’s non-blocking, simple to implement, and doesn’t require information of guarantees or async/await. Nonetheless, it isn’t appropriate for complicated asynchronous operations that require exact timing or error dealing with.

Circulation Management in Fashionable JavaScript

It’s usually 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 (resembling replace the UI to show the information).

The instance above makes use of an nameless callback perform for this function, but when you could 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 developed significantly over the previous few years and now affords 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('Howdy!');
})();

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

If that is extra the type of factor you’re making an attempt to perform, I encourage you to learn our article Circulation Management in Fashionable JS: Callbacks to Guarantees to Async/Await.

Bringing Sleep to Native JavaScript

When you’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 would possibly try this:

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

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

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

It really works through the use of the Date.now technique 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 executed, proper? Effectively, not fairly …

The best way to Write Higher Sleep Perform 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 one can work together together with your program till it finishes. When you want a big delay, there’s an opportunity that it might even crash issues altogether.

So what to do?

Effectively, it’s additionally attainable to mix the strategies realized earlier within the article to make a much less intrusive sleep technique:

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

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

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

Discover that we have to use a then callback to ensure the second message is logged with a delay. We will additionally chain extra callback features onto the primary:

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

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

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

async perform delayedGreeting() {
  console.log('Howdy');
  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 perform must be marked as async.

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

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

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

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

The code above logs the next:

Howdy
Goodbye!
World!

Finest Practices for Making a JavaScript Sleep Perform

We’ve explored varied methods to introduce delays in JavaScript. Now let’s recap on which technique is greatest fitted to totally different situations, and which one you must usually keep away from.

1. Plain setTimeout

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

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

2. Incremental setTimeout

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

• 👍 Execs: Non-blocking, simple 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('Howdy');
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 complete thread, can freeze the UI or crash this system.
• ⚠️ Strongly Discouraged: Solely use this should you completely have to halt execution and are conscious of the dangers.

4. Utilizing Guarantees with setTimeout

const sleep = perform(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
console.log('Howdy');
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: If you want extra management over timing and asynchronous operations.

5. Utilizing async/await with Guarantees

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

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

delayedGreeting();

• 👍 Execs: Clear syntax, simple to learn, non-blocking.
• 👎 Cons: Requires understanding of async/await and guarantees. Requires “wrapping” perform outdoors of modules.
• ✅ Strongly Beneficial: That is essentially the most fashionable 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 take care of them relies on what you’re making an attempt to attain.

Though a sleep perform is current in lots of different languages, I’d encourage you to embrace JavaScript’s asynchronous nature and check out to not struggle the language. It’s really fairly good once 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 here are some continuously requested questions on creating delays in JavaScript.