for loop delay in javascript

Question

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....

I dont want like below..I want without using setTimeout...

for(i=0; i<=10;i++){
        setTimeout("setvalue()",2000); //This alert should display for every 2 secs only
        }

        function setvalue()
        {
         var s=i;
        }

please help me...

So you want a delay without using the exact feature built into javascript to do a delay? — Richard Dalton, Aug 02 '11 at 09:25
If you call something like a sleep, the browser will freeze for the whole loop duration. Are you sure you used the callback correctly ? Because the code you placed won't work. — Clement Bellot, Aug 02 '11 at 09:27
-1, because you're asking for a problem to be solved and for some obscure reason, demanding that the very part of the API that exists to solve your problem, to not be used. — Moo-Juice, Aug 02 '11 at 09:28
Possible duplicate of [How do I add a delay in a JavaScript loop?](http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop) — Itay Radotzki, Oct 07 '15 at 15:06

score 9 · Answer 1 · answered Aug 02 '11 at 09:25

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.

valderman · Answer 2 · 2011-08-02T09:28:01.333

3

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."

edited Aug 02 '11 at 09:28

answered Aug 02 '11 at 09:25

valderman

8,365
4
22
29

score 2 · Answer 3 · edited Aug 02 '11 at 09:29

2

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();

edited Aug 02 '11 at 09:29

Matt

74,352
26
153
180

answered Aug 02 '11 at 09:27

Madara's Ghost

172,118
50
264
308

score 1 · Answer 4 · answered Jul 10 '13 at 14:02

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

        // recurse
        loop();

    }, 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;
(function loop() {
    setTimeout(function() {
        // logic
        count++;
        if (count < 10) {
            loop();
        }
    }, 1000);
})();

for loop delay in javascript

4 Answers4

Linked

Related