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 function, however to not fear. On this article, we’ll discover numerous methods to implement delays in your JavaScript code, protecting 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 wish to dive into the technical particulars, we’ve obtained you lined. Right here’s probably the most easy 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 approach to introduce a delay with out breaking a sweat.

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

Understanding JavaScript’s Execution Mannequin

Now that we’ve obtained a fast resolution beneath 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.

Contemplate the next Ruby code:

require 'internet/http'
require 'json'

url = 'https://api.github.com/customers/jameshibbard'
uri = URI(url)
response = JSON.parse(Web::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 consumer 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 would 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 would not, nevertheless, await the request to finish. Slightly, it would proceed on its means, output “Howdy!” to the console, after which when the request returns a few hundred milliseconds later, it would 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 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 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 circumstances, 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 implies the remainder of your code received’t await 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 could’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 think about what would possibly occur within the above code snippet.

It received’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 await setTimeout to finish earlier than transferring on to the subsequent iteration.

To acquire the specified output, we have to alter 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, making certain a one-second interval between every output.

The important thing takeaway right here is that setTimeout doesn’t block a program’s execution, relatively 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 Inspecting and Greatest Practices

As you may 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 could be helpful if, for instance, you wished to show a popup after a customer has been shopping 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 consumer unintentionally moused out).

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

This may be the title 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 potential to go setTimeout a string of code for it to execute:

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

Nevertheless, this technique isn’t advisable, as:

• it’s exhausting to learn (and thus exhausting to keep up 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 potential 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 component 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 component will flip up sooner or later. When you’re unsure that’s the case, you’ll want to have a look at canceling the timer (utilizing clearTimeout or clearInterval).

Rising Timeouts as Different to Sleep Perform in JavaScript

Typically, you would possibly end up desirous to introduce delays in a sequence of operations. Whilst you may use numerous strategies to emulate a sleep perform, there’s one other method that’s typically neglected: incrementally rising timeouts.

The thought is easy: as an alternative of pausing all the 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 consumer 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 data 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 Fashionable JavaScript

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

The instance above makes use of an nameless callback perform for this objective, but when you should await 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 are able to rewrite the preliminary code to fetch data 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 kind of factor you’re attempting 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, this can log “Howdy”, pause for 2 seconds, then log “World!”

It really works by utilizing 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 coming 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 achieved, proper? Properly, not fairly …

The best way to Write Higher Sleep Perform in JavaScript

Possibly 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 make 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?

Properly, it’s additionally potential to mix the methods 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!” Beneath 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 verify 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 implies 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 function) that they don’t pause all the 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!

Greatest Practices for Making a JavaScript Sleep Perform

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

1. Plain setTimeout

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

• 👍 Professionals: Easy to know, 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('Howdy'); }, 1000);
setTimeout(() => { console.log('World!'); }, 2000);

• 👍 Professionals: Non-blocking, simple to implement, and doesn’t require data 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!');

• 👍 Professionals: Mimics conventional sleep habits.
• 👎 Cons: Blocks all the 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 = perform(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
console.log('Howdy');
sleep(2000).then(() => { console.log('World!'); });

• 👍 Professionals: 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();

• 👍 Professionals: Clear syntax, simple to learn, non-blocking.
• 👎 Cons: Requires understanding of async/await and guarantees. Requires “wrapping” perform outdoors of modules.
• ✅ Strongly Advisable: That is probably the most trendy and clear method, 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 is dependent upon what you’re attempting to realize.

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 combat the language. It’s really fairly good if you get used to it.

When 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 often requested questions on creating delays in JavaScript.