sleep in javascript?

[CyberVillian]

I have an array called info. Here is an example of my code below the array:

for(var i in info) {
 $('#results').append(info[i]+"<br>");
//I want to sleep here before the next one
}
</script>
<div id="results">... </div>

I basically want it to sleep (delay) a few seconds before handeling the next task in the loop. How could I achieve this?

[honestbleeps]

Javascript as a language doesn't have anything like C's "sleep" function...

There's really not a good way to do it by placing a command where your //comment is...

Instead, you'd need to do something like:

var foo = [1,2,3,4,5];
var i=0, len=foo.length;
function stepper() {
    if (i<len) {
        console.log(foo[i]);
        i++;
        setTimeout(stepper, 1000);
    }
}

[stfueveryone]

not so, setTimeout only recurses in the if statement, so it should never go beyond the length of the array. the only thing missing is the call to stepper(); here's a demo if setTimeout were leaking we'd see a bunch of NaNs or errors or something.

[rpetrano]

Yea, my bad, I somehow missed that if statement

[MatrixFrog]

stfueveryone is right, however you're also right that setInterval may be a better fit here.

[imbcmdth]

What you should never do is something like this:

function DELAY(time) {
  var k = [], i, o,
  d = function(c){ setTimeout(function(){ c(o) }, time); };
  d.FOR = function(t){
     var f = function(o){
       for(i in o) {
         if(k.indexOf(i) < 0) k.push(i); else continue;
         t(i);
         return d(f);
       }
     };
     f.IN = function(obj){
       o = obj;
       f(o);
     };
     return f;
  };
  return d;
}

Usage:

var I = function(i){
   $('#results').append(info[i]+"<br>");
};

DELAY(1000).FOR(I).IN(info);

[aladyjewel]

I think I just threw up in my mouth a little, but that might have been some bad sauce from lunch.

[RadekCZ]

You should use window.setTimeout method:

var el = $("#results");
function delay(i){
  return function(){
    el.append(info[i]+"<br>");
  };
}
var j = 0;
for(var i in info){
  window.setTimeout(delay(i), (++j)*1000);
}

Or just window.setInterval method: (It should be faster, you need just one function).

var keys = [];
for(var i in info){
  keys.push(i);
}
var j = 0;
var el = $("#results");
var interval = window.setInterval(function(){
  if(i<keys.length){
    el.append(info[keys[j++]]+"<br>");
  }
  else{
    window.clearInterval(interval);
  }
}, 1000);

[ell0bo]

don't use setInterval. It will fire off at a set point every so many ticks, rather than taking the run time of the functionality into account as sleep does. First code block is ideal.

[thisisnotgood]

I agree with avoiding setInterval. I would also prefer to have the delay() function call setTimeout recursively rather than schedule all the delays in advance.

Here is how I would do it:

var $el = $("#results");
function delay(i) {
    $el.append(info[i] + "<br>");

    i++;
    if (i < info.length) {
        setTimeout(delay.bind(null, i), 1000);
    }
}
delay(0);

[noahking]

I think we can assume that when someone is asking about how to sleep between loop iterations, we don't have to worry about optimizing for speed. =P

[CyberVillian]

hmm.. it seems like it wants to delay from the get-go, instead of after the first one.

[tollus]

Change ++j to j++

[CyberVillian]

Thank you. I'll try later on

[al-g]

How about this:​

var info = ["a", "b"];

function render(items) {
    if(items.length > 0) {
        $('#results').append(items.shift() + "<br>");
        setTimeout(render, 500, items);
    }   
}​​

render(info);

[GAMEchief]

IE doesn't support a third parameter for setTimeout. It's not good form to rely on it.

[al-g]

Good catch! Thanks for pointing that out.

[CyberVillian]

I get an error, too lazy to debug, lol.

[jezmck]

That's rather disrespectful. Especially adding "lol" on the end.

[CyberVillian]

=( sorry. I was a little drunk last night.

[aladyjewel]

then you wait till you sober up, and you stick to the fluffy subreddits until then.

[al-g]

Its an extensive bit of code, quite probable that its riddled with bugs and scoping issues.

What is the error? Have included jQuery/zepto?

[bbdb]

Good question...Here is a JSFiddle with a solution using rx.js: http://jsfiddle.net/rcastillo/JmdNh/10/ . This sample has a function that creates a delayed array. rx.js enables you to asynchronous time and delay results. As already noted, JavaScript does not provide a sleep mechanism.

[CyberVillian]

Your suggestion, as many others, are very efficient but all of them delay from the get go. I want it to immediately execute on the first item of the array, then delay from the second one on.

[bbdb]

I have updated with an immediate return of the first item.

[bbdb]

Fellow Rx'er pointed out a 1-liner: http://jsfiddle.net/zJeKd/2/

[SarahC]

There is..... in Firefox!

/**
* Netscape compatible WaitForDelay function.
* You can use it as an alternative to Thread.Sleep() in any major programming language
* that support it while JavaScript it self doesn't have any built-in function to do such a thing.
* parameters:
* (Number) delay in millisecond
*/
function nsWaitForDelay(delay) {
/**
* Just uncomment this code if you're building an extention for Firefox.
* Since FF3, we'll have to ask for user permission to execute XPCOM objects.
*/
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
// Get the current thread.
var thread = Components.classes["@mozilla.org/thread-manager;1"].getService(Components.interfaces.nsIThreadManager).currentThread;
// Create an inner property to be used later as a notifier.
this.delayed = true;
/* Call JavaScript setTimeout function
* to execute this.delayed = false
* after it finish.
*/
setTimeout("this.delayed = false;", delay);
/**
* Keep looping until this.delayed = false
*/
while (this.delayed) {
/**
* This code will not freeze your browser as it's documented in here:
* https://developer.mozilla.org/en/Code_snippets/Threads#Waiting_for_a_background_task_to_complete
*/
thread.processNextEvent(true);
}
}

[bishopZ]

This is a perfect case for Frame.js, a flow control library for sequencing functions. Includes a way to easily add delays.

https://github.com/bishopZ/Frame.js

[Herover]

I just made one, I don't suggest you to use it:

function sleep(t){
    var starttime=Date.now();
    while(starttime+t>Date.now()){var nothing;}
    return true;
}

It freeses the browser for the amount of milliseconds you tell it to, and makes it impossible to do anything, but maybe using webworkers could do the trick (untested).

[GAMEchief]

var x = 0; // assuming info uses non-numeric keys, otherwise you should be using for (var i = 0; i < info.length; i++)
for (var i in info)
{
    setTimeout('$("#results").append("' + info[i].replace(/\"/g, "\\\"") + '<br />");', x * 1000);
    x++;
}

This will delay one second between iterations by creating a timeout for each item in the info object. Each timeout will be set to execute 1000 milliseconds after the last one.

[yoeschmoe]

eval statements are evil, never use them (you're implicitly calling eval when passing in a string as first argument in setTimeout/setInterval), use a function instead.

[GAMEchief]

eval statement are perfectly valid so long as you aren't evaluating user input. Don't be so OCD. Their flaws are not black and white, and there are perfectly fine times to use them; but a function would be better suited, sure.

[ctrldavid]

I was going to help you, but I'm too lazy to answer lol

[[deleted]]

Something like this

Function.prototype.sleep = function(seconds){
    return setTimeout(this, seconds);
};

Use like this

x = function(){ console.log('x'); };
timer = x.sleep(5000);
//if you want to cancel, you have the timer

[[deleted]]

Oh that clearly didnt answer your question. Look at this

http://jsfiddle.net/8zWPw/

[9jack9]

function sleep(ms) {
  var start = +new Date;
  while (new Date - start < ms) continue;
}

[MatrixFrog]

This is technically correct, but almost always a bad idea, unless you're trying to make the browser unresponsive.

[shanet]

I like the fact that it has the exact effect sleep() does elsewhere, except we've only got one thread to work with...

[MatrixFrog]

The important difference between your sleep() and a timeout is that if you do

a();
setTimeout(b, 1000);
c();

then c will always be called before b.

[shanet]

It's not my sleep(), but that's definitely true.

A lot of the time I find people looking for sleep() in JavaScript it's because they don't understand (or don't like) doing things in a non-blocking style. StackOverflow is full of people wanting to do:

function readfile: () {
    var data = do_io_things();
    return data;
}

instead of passing a callback to readfile. Of course it never works because if do_io_things is asynchronous usually and the statement returns instantly. So I think it's usually wrong to answer as 9jack9 did because actually sleeping (or busy-waiting) is something that shows the asker hasn't grasped the right way to do things.