Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

JavaScript sleep Function

By David Walsh on June 6, 2016

The infamous sleep, or delay, function within any language is much debated. Some will say that there should always be a signal or callback to fire a given functionality, others will argue that sometimes an arbitrary moment of delay is useful. I say that to each their own and one rule can never dictate anything in this industry.

Writing a sleep function is simple and made even more usable with JavaScript Promises:

// https://zeit.co/blog/async-and-await
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

// Usage!
sleep(500).then(() => {
    // Do something after the sleep!
})

Without promises you'd need to pass a callback; with our beautiful promises we simply resolve after the setTimeout and use then with the result to execute the next step. You'll also note that the demo above uses ES6 arrow functions.

Recent Features

By David WalshSeptember 19, 2011
Introducing MooTools Templated
One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...
By David WalshMay 18, 2011
CSS Gradients
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

By David WalshFebruary 23, 2010
Create a Simple News Scroller Using MooTools, Part I: The Basics
News scroller have been around forever on the internet. Why? Because they're usually classy and effective. Over the next few weeks, we'll be taking a simple scroller and making it into a flexible, portable class. We have to crawl before we...
By David WalshApril 8, 2010
Create a Trailing Mouse Cursor Effect Using MooTools
Remember the old days of DHTML and effects that were an achievement to create but had absolutely no value? Well, a trailing mouse cursor script is sorta like that. And I'm sorta the type of guy that creates effects just because I can.

Discussion

Thomas BROYER
This is not a “sleep” function, as it doesn’t block the current (main) thread, it’s more an “after” function; à la Golang Sleep vs. After: https://golang.org/pkg/time/

Thomas BROYER
(of course, reading from the channel in Golang would block, so not really an appropriate comparison either, but you get the idea: things can happen between the call to the function and the “callback” happens)
MaxArt
Of course, nothing like the classic ‘sleep’ function exists in Javascript – and should never exist, actually. The only blocking thing in Javascript has been a sync AJAX request – a relic of the past.
It’s just a way to introduce a similar concept, but still in Javascript’s way of coding.

selvagsz
With await, this would look even more sweet,
```
await sleep(500);
// do stuff
```

MaxArt
Yes, I was thinking of the same thing. The only thing that bugs me is that every function that uses await should be declared async.
(Actually, it’s the main complaint about async/await…)

Revlift
This signal callback function I always used my program, sleep await used in synchronus programe
Tolis
Make sure you clear the timeout when the Promise resolves.
Claudio
Not a big fan of this approach.

Without async/await, wrapping a setTimeout call into a non-blocking Promise does not add any value but readability, not to mention that it prevents the timer from being canceled.
Rüdiger
I agree that this isn’t a solution for a possible sleep function.
From my point of view it should stop the current process (but not the event handling) and continue (within the same scope when it was called) afterwards.

Thus, you may call it in a function without the need to split the function into two, which is necessary using the approach above.

And when already talking about a sleep function, a processMessages() function, similar as in Delphi/Lazarus (Application.processMessages()) is needed too… :)

Kay

Not everyone likes or knows (like me) the magic of arrow functions. Here is the “same” code without =>

function sleepAsync(time) {
  //return new Promise((resolve) => setTimeout(resolve, time));
    var p = new Promise();
    setTimeout(function() { p.resolve(); }, time);
    return p.promise();  
}

Kay

Ah, and this is usage without arrow function for both:

// Usage!
sleep(500).then(function(){
    // Do something after the sleep!
})

Vitaliy

If you also need to clear promised timeout (like setTimeout does), consider this package: https://github.com/vitalets/await-timeout

import Timeout from 'await-timeout';

async function foo() {
  const timeout = new Timeout();
  try {
    const mainPromise = fetch('https://example.com');
    const timerPromise = timeout.set(1000, 'Rejected by timeout');
    await Promise.race([mainPromise, timerPromise]);
  } catch (e) {
    console.error(e);
  } finally {
    timeout.clear();
  }
}

JavaScript sleep Function

Recent Features

Introducing MooTools Templated

CSS Gradients

Incredible Demos

Create a Simple News Scroller Using MooTools, Part I: The Basics

Create a Trailing Mouse Cursor Effect Using MooTools

Discussion