For Loop Delay In Javascript

How to set delay in for loop execution for(i=0; i<=10;i++){ var s=i;//This line should execute for every 2 secs only } How to give loop delay in java script.

Solution 1:

Use setInterval()

var i = 0;

var interval = setInterval(function(){
    setValue();
    i += 1;

    if(i == 10)
        clearInterval(interval);
}, 2000);

There is no way to sleep for 2sec without freezing the whole browser. Javascript is single threaded.

Solution 2:

You can't. JS runs in a single thread and any attempt to delay that thread will freeze the entire page. Using setTimeout is your only option.

EDIT: or setInterval; either way, there is no non-hairy way to express "halt execution here for x milliseconds."

Solution 3:

Using setTimeout is inevitable, however, a recursive function might be a better solution for this one:

var i=0;
function recurs() {
    i = s;
    i++;
    if (i <= 10) recurs();
}

recurs();

Solution 4:

As others have stated, setTimeout can be used very well to handle these sorts of scenarios and setInterval could also be used but is discouraged by some.

You can even recursively call a function that has setTimeout built into it as mentioned in the MDN documentation of setInterval. The heading there mentions 'dangerous usage' but their solution to the danger is the block of code beneath.

There it mentions that to have a loop executing every x seconds (or milliseconds) then you can do the following and know for sure that the functions will only be executing one at a time and in-sequence:

(function loop(){
    setTimeout(function(){
        // logic here// recurseloop();

    }, 1000); // repeat loop 1 second after this branch has completed
})();

And if you want it to only do that a limited number of times, then you can create a variable outside of the loop and only recursively execute if the count is smaller than the number of times you want to execute for. Such as this:

var count = 0;
(functionloop() {
    setTimeout(function() {
        // logic
        count++;
        if (count < 10) {
            loop();
        }
    }, 1000);
})();