put delay in javascript

Question

I need to add delay about 100 milisecond to my javascipt but i don't want to use settimeout function of window and either don't want to use busy loop. does anyone has any suggestion?

Answer 1

Unfortunately, setTimeout() is the only reliable way (not the only way, but the only reliable way) to pause the execution of the script without blocking the UI.

It's not that hard to use actually, instead of writing this:

var x = 1;

// Place mysterious code that blocks the thread for 100 ms.

x = x * 3 + 2;
var y = x / 2;

you use setTimeout() to rewrite it this way:

var x = 1;
var y = null; // To keep under proper scope

setTimeout(function() {
    x = x * 3 + 2;
    y = x / 2;
}, 100);

I understand that using setTimeout() involves more thought than a desirable sleep() function, but unfortunately the later doesn't exist. Many workarounds are there to try to implement such functions. Some using busy loops:

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

others using an XMLHttpRequest tied with a server script that sleeps for a amount of time before returning a result.

Unfortunately, those are workarounds and are likely to cause other problems (such as freezing browsers). It is recommended to simply stick with the recommended way, which is setTimeout()).

Answer 2

This thread has a good discussion and a useful solution:

function pause( iMilliseconds )
{
    var sDialogScript = 'window.setTimeout( function () { window.close(); }, ' + iMilliseconds + ');';
    window.showModalDialog('javascript:document.writeln ("<script>' + sDialogScript + '<' + '/script>")');
}

Unfortunately it appears that this doesn't work in some versions of IE, but the thread has many other worthy proposals if that proves to be a problem for you.

Answer 3

In jQuery, you can chain methods, so they will be executed one after another. You can have a hidden div in your page, then use the jQuery hide/show methods in the chaining, with a set speed for each one, resulting in a kind of delay. For example,

myfunction1(){
    alert("First function called");
    $("#hiddenDiv").show(10, function(){
        mySecondFunction();
    });
});

In the above code, the "First function called" alert will execute, followed by mySecondFunction.

Answer 4

Actually only setTimeout is fine for that job and normally you cannot set exact delays with non determined methods as busy loops.