JQuery, setTimeout not working

Question

I'm still new to JQuery, on the way to getting my ajax example to work i got stalled with setTimeout. I have broken it down to to where it should add "." to the div every second.

The relevant code is in two files.

index.html

<html><head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='myCode.js'></script>
</head>
<body>
<div id='board'>Text</div>
</body>
</html>

and myCode.js

(function(){
   $(document).ready(function() {update();});

   function update() { 
      $("#board").append(".");
      setTimeout('update()', 1000);     }
 })();

the myCode.js file works alright and "update()" runs the first time through but never again.

score 113 · Accepted Answer · edited Mar 05 '14 at 09:20

You've got a couple of issues here.

Firstly, you're defining your code within an anonymous function. This construct:

(function() {
  ...
)();

does two things. It defines an anonymous function and calls it. There are scope reasons to do this but I'm not sure it's what you actually want.

You're passing in a code block to setTimeout(). The problem is that update() is not within scope when executed like that. It however if you pass in a function pointer instead so this works:

(function() {
  $(document).ready(function() {update();});

  function update() { 
    $("#board").append(".");
    setTimeout(update, 1000);     }
  }
)();

because the function pointer update is within scope of that block.

But like I said, there is no need for the anonymous function so you can rewrite it like this:

$(document).ready(function() {update();});

function update() { 
  $("#board").append(".");
  setTimeout(update, 1000);     }
}

or

$(document).ready(function() {update();});

function update() { 
  $("#board").append(".");
  setTimeout('update()', 1000);     }
}

and both of these work. The second works because the update() within the code block is within scope now.

I also prefer the $(function() { ... } shortened block form and rather than calling setTimeout() within update() you can just use setInterval() instead:

$(function() {
  setInterval(update, 1000);
});

function update() {
  $("#board").append(".");
}

Hope that clears that up.

Thanks, It worked. Can anyone explain why it doesn't work the way it was? every example I've looked at is more similar to the formatting I've used. — Bolt_Head, Sep 30 '09 at 03:00
is w3schools really the best resource to reference this? he would have made the same mistake if he used that page as an example. — meder omuraliev, Sep 30 '09 at 03:03
w3schools is correct in this case. The issue was a scope issue. — cletus, Sep 30 '09 at 03:25
w3schools is not correct in many cases and does not promote best practices in web standards. I suggest MDC: https://developer.mozilla.org/En/Window.setTimeout — meder omuraliev, Sep 30 '09 at 03:28
just for your information http://api.jquery.com/delay/ ... i was searching for the same and end up here and the above link. i am adding this to my favorite so i can refer to this comment... — Jayapal Chandran, Feb 08 '12 at 09:03

meder omuraliev · Answer 2 · 2009-09-30T03:14:37.273

21

setInterval(function() {
    $('#board').append('.');
}, 1000);

You can use clearInterval if you wanted to stop it at one point.

edited Sep 30 '09 at 03:14

answered Sep 30 '09 at 02:58

meder omuraliev

183,342
71
393
434

1

I haven't used setInverval before but it appears to be a more direct route of accomplishing my goal. Thanks – Bolt_Head Sep 30 '09 at 03:10
cletus seemed to have added it to his solution; the important thing to learn is that you should feed a real function to setInterval/setTimeout, not a string that will be evaluated eg 'update()' – meder omuraliev Sep 30 '09 at 03:14
2

Passing a code block like 'update()' is valid but not preferred. – cletus Sep 30 '09 at 03:26
for all users information. http://api.jquery.com/delay/ - a very good one if you are going to use only jquery. – Jayapal Chandran Feb 08 '12 at 09:02
this one work as expected ,, wasting time using setTimeout – haidarvm Aug 14 '15 at 04:08

Goysar · Answer 3 · 2012-03-15T07:13:58.037

8

SetTimeout is used to make your set of code to execute after a specified time period so for your requirements its better to use setInterval because that will call your function every time at a specified time interval.

edited Mar 15 '12 at 07:13

answered Dec 22 '09 at 04:42

Goysar

529
7
25

3

I would disagree, setTimout is better practice, in the case where the function update() took longer than 1s to run you could have multiple instances of the same function running at the same time. if you use setTimeout the function update() has to completely finish before the next loop of time occurs, thus only 1 instance will ever be running at one time. – kamui Mar 15 '12 at 07:59

score 0 · Answer 4 · answered Jan 29 '17 at 00:08

0

This accomplishes the same thing but is much simpler:

$(document).ready(function() {  
   $("#board").delay(1000).append(".");
});

You can chain a delay before almost any jQuery method.

answered Jan 29 '17 at 00:08

Victor Stoddard

3,582
2
27
27

JQuery, setTimeout not working

4 Answers4

Linked