Javascript setTimeout with function in a for loop

Question

Using Javascript, I'm trying to loop through an array and execute a function with a time delay on each loop. This does not work:

<script type="text/javascript">
movesArray = new Array("s","s","s","s","s","s","s","s","s","s","s","s","s","s");
var pause = 100;
for (i=0; i<=14; i++)
{
    var t=setTimeout("ProcessKeypress(movesArray[i])", pause);
    pause = pause+100;
}
</script>

However, if I just repeat it multiple times it does work:

<script type="text/javascript">

var t=setTimeout("ProcessKeypress('s')", 100);
var t=setTimeout("ProcessKeypress('s')", 200);
var t=setTimeout("ProcessKeypress('s')", 300);
var t=setTimeout("ProcessKeypress('s')", 400);
var t=setTimeout("ProcessKeypress('s')", 500);

</script>

The problem is that in some cases I will need to repeat the function a few hundred times (maybe more) which creates a large webpage. Is there a way to loop through the array and run the function on a time delay?

There is so much wrong with this I don't even know where to start.... — Justin Thomas, Dec 09 '11 at 00:28
It may not be the problem, but you are wrong to add single quotes in the firs parameter to setTimeout. Try `var t=setTimeout("ProcessKeypress(movesArray[i])", pause);` instead. — Borodin, Dec 09 '11 at 00:31
Why the -1? I may be doing a lot of things wrong with my code; but that's why I asked the question here to get input on what I should change. — Marcus, Dec 09 '11 at 00:43

score 2 · Accepted Answer · answered Dec 09 '11 at 00:34

You are passing the string "movesArray[i]". Just escape the string

movesArray = new Array("s","s","s","s","s","s","s","s","s","s","s","s","s","s");
var pause = 100;
for (i=0; i<=14; i++)
{
    var t=setTimeout("ProcessKeypress(movesArray[" +i +"])", pause);
    pause = pause+100;
}

Purag · Answer 2 · 2011-12-09T00:36:34.277

1

Use setInterval(). You can run a function at any interval:

setInterval(function(){
    // do stuff
}, 300);

Also, use function(){} inside the setTiemout instead of just the code:

setTimeout(function(){
    // do stuff
}, pause);

edited Dec 09 '11 at 00:36

answered Dec 09 '11 at 00:30

Purag

16,941
4
54
75

jfriend00 · Answer 3 · 2011-12-09T00:55:45.707

If you want each iteration of the loop to go a certain time delay after the previous one finishes, then your way of doing it will have an issues with the index into the array. These are the issues I see:

Your index will not be correct as all calls to ProcessKeypress() will have i == 15.
It's also better to pass setTimeout() an actual javascript function rather than a string that it has to evaluate.
And, I also think it's generally better to just set the next timer when the first completes rather than set all of them at once (though either can work).
And, your code was going up to movesArray[14], but you didn't have that many items in the array. It's better to refer to the array .length rather than hard code the 14.

My suggestions can be implemented like this:

<script type="text/javascript">
movesArray = new Array("s","s","s","s","s","s","s","s","s","s","s","s","s","s");
var i = 0;

function nextIteration() {
    ProcessKeypress(movesArray[i++]);
    if (i < movesArray.length) {
        setTimeout(nextIteration, 100);
    }
}

nextIteration();

</script>

Javascript setTimeout with function in a for loop

3 Answers3