Today I was just looking into ways to simulate delay, sleep, pause, wait or such in JavaScript/jQuery. I’ve briefly looked into this topic before for locking a web page on timer. Here are some more thoughts on the topic. PHP has a sleep() function but JavaScript doesn’t as such. jQuery offers us both setTimeout which is similar to run a block of code after a specific time period. Well, this is because it’s useless you might say. But for simulating heavy processing and for misc performance measurements, it could be useful. So here’s how you can go about creating a sleep() in JavaScript, just a little code snippet I found somewhere.

Example of sleep function in js

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Usage

Sleep for 1 second (1000 milliseconds).

console.log(new Date());
console.log('Dude!');
sleep(1000);
console.log(new Date());

PHP to JS

Great project – essentially converting PHP function logic to JavaScript. I saw they have converted PHP’s < href="http://www.php.net/manual/en/function.time-sleep-until.php">time_sleep_until into JavaScript function below.

function time_sleep_until (timestamp) {
  // http://kevin.vanzonneveld.net
  // +   original by: Brett Zamir (http://brett-zamir.me)
  // %          note: For study purposes. Current implementation could lock up the user's browser.
  // %          note: Expects a timestamp in seconds, so DO NOT pass in a JavaScript timestamp which are in milliseconds (e.g., new Date()) or otherwise the function will lock up the browser 1000 times longer than probably intended.
  // %          note: Consider using setTimeout() instead.
  // *     example 1: time_sleep_until(1233146501) // delays until the time indicated by the given timestamp is reached
  // *     returns 1: true
  while (new Date() < timestamp * 1000) {}
  return true;
}

//run
time_sleep_until(1233146501) // delays until the time indicated by the given timestamp is reached

Other sleepy stuff
May you could use a chained delay() function?

- trigger function after x milliseconds $("#myElement").delay(2000).trigger("click");

Read more: jQuery: Delay execution of any function

Or a setTimeout()…

var dotCounter = 0;
(function addDot() {
  setTimeout(function() {
    if (dotCounter++ < 10) {
      $('#dots').append('.');
      addDot();
    }
  }, 1000);
})();

Read more: John Resig on How JavaScript Timers Work

Sam Deering Sam Deering
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

  • teemo

    Thanks :-),this is helpful

    • http://jquery4u.com/ jQuery4u

      thanks :)

  • http://twitter.com/maximus392 Karan Saini

    In the above code, can someone explain what is meaning of i < 1e7;

    for (var i = 0; i < 1e7; i++)

    • airyland

      1e7===10000000

    • http://jquery4u.com/ jQuery4u

      1e7 essentially means 1 followed by 7 zeros – it represents a decimal base (JS interprets as a float type) equal to 10,000,000.
      Sam

  • http://jquery4u.com/ jQuery4u

    Nice plugin Bob!

  • Cawe Coy Rodrigues Marega

    Awesome!

  • Mark Vermeulen

    Very nice article though, I thought this was impossible in javascript.

  • Bob

    After days, weeks even, I finally come across a sleep function that is simple and it works. Thank yoi.

  • jsmink

    I found that when I tried this, I would only get about 3 seconds before the loop stopped. I prefer this:

    var start = new Date().getTime();

    var timer = true;
    while (timer) {
    if ((new Date().getTime() – start)> milliseconds) {
    timer = false;
    }
    }

  • http://darvishzadeh.com/ Sonny Darvishzadeh

    there’s something wrong with the font size of this article, probably the H2

  • Rob

    Pegging the CPU is technically not sleeping…

Related books & courses
Available now on SitePoint Premium

Preview for $1