JS setTimeout Not Delaying

Question

Alright guys, I'm trying to add numbers on my page every 1/4 second or so. So the change is visible to the user. I'm using setTimeout and all my calculations are occurring correctly but without any delay. Here's the code:

for(var i = 0; i < 10; i++)
{
  setTimeout(addNum(i),250);
}

I've also tried capturing the return value:

for(var i = 0; i < 10; i++)
{
  var t = setTimeout(addNum(i),250);
}

I've also tried using function syntax as part of the setTimeout params:

for(var i = 0; i < 10; i++)
{
  var t = setTimeout(function(){array[j].innerHTML + 1},250);
}

I've also tried putting code in a string & the function call in a string. I can't ever get it to delay. Help Please!

score 3 · Answer 1 · answered Jul 13 '11 at 23:25

3

How about:

var i=0;
function adder() {
   if(i>=10) {return;}
   addNum(i++);
   setTimeout(adder,250);
}
adder();

When you did setTimeout(addNum(i),250); you executed the function straight away (function name followed by () will execute it right away and pass the return value to the timeout to be executed 1/4 second later). So in a loop that would just execute all 10 immediately. Which is what you saw.

Capturing the return value var t = setTimeout(...); is helpful, but not in your use case; the value is the timer id number, used for cancelling the timeout.

Not sure what your last attempt is, although presumably it's the function body of your addNum routine, so the same logic applies as above.

answered Jul 13 '11 at 23:25

davin

44,863
9
78
78

Teeeeecccchhhhnniicallllly, that should be in a closure to avoid the global `i`, but +1 for addressing the actual problem and giving working code. – Ray Toal Jul 13 '11 at 23:31
So...This will execute multiple times?? that was why i used a loop bc I need it to add multiple times in multiple places. – ExceptionLimeCat Jul 13 '11 at 23:36
@Ray, I assume it will be in a closure in the actual implementation (I have no intention of copying the entire namespace just to match the real code-base, that's not how I roll). In addition I figure that people who understand the implications of polluting the global namespace will be able to implement solutions appropriately, and for those who haven't there's no need to add extra clutter to a simple task. The job here is not to enumerate every good practise you know, it's to address the question at hand. But you're welcome to answer questions any way you feel, that's my 2c. – davin Jul 13 '11 at 23:37
@Exception, it will execute `addNum(i)` with values of `i` from `0` to `9`, each execution every 1/4 second. Although I recommend you test it for yourself. Change the numbers and see how it responds. Try and understand why it works that way. – davin Jul 13 '11 at 23:38
Will do. And I think @Ray is an academic (judging by his email address) which would explain why he is so anal about the use of a global variable. haha – ExceptionLimeCat Jul 13 '11 at 23:41
Hmmm, I would have called Ray's advice something more along the lines of "rigorous", with the intention of a positive connotation. – davin Jul 13 '11 at 23:44
Yes, thanks, the lead in of "teeeccchhhh...." was supposed to be suggest "I know _you_ know but just in case anyone else reads this..." It didn't come out right. – Ray Toal Jul 13 '11 at 23:54

score 0 · Answer 2 · answered Jul 13 '11 at 23:26

0

Try setTimeout("addNum(" + i + ")", 250); the reason its not working is because its evaluating the parameter and executing it and changing it to something like setTimeout(result of addNum(i), 250);

answered Jul 13 '11 at 23:26

Jesus Ramos

22,940
10
58
88

That won't space out the numbers the way he wants though, because `setTimeout` returns immediately. – Ray Toal Jul 13 '11 at 23:29
If you enclose the parameter as a string it gets evaled inside setTimeout so it executes correctly – Jesus Ramos Jul 13 '11 at 23:30
But yes all 10 will happen at once in the loop, setInterval is probably a better option – Jesus Ramos Jul 13 '11 at 23:30

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

Perhaps instead, since you're running the same method multiple times, you should use the setInterval method instead? Here's an example of how you might do that.

edited May 23 '17 at 11:48

Community

1
1

answered Jul 13 '11 at 23:29

Nightfirecat

11,432
6
35
51

I think I should be using the `setInterval` per your provided link. But I'm having trouble with it too. If I just pass `setInterval` a method that just adds one to a value. When the page loads it only executes once. `function add(){var i = i++;} setInterval(add(),500);` – ExceptionLimeCat Jul 14 '11 at 15:44
Because you're calling the method, not passing a reference to it, for the setInterval - just remove the parens to fix it: `function add(){var i = i++;} setInterval(add, 500);` – Nightfirecat Jul 14 '11 at 16:57

JS setTimeout Not Delaying

3 Answers3