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.

groovecoder · Accepted Answer · 2014-03-05 09:20:24Z

113

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.

edited Mar 5, 2014 at 9:20

groovecoder

1,5811 gold badge17 silver badges29 bronze badges

answered Sep 30, 2009 at 2:57

cletus

627k169 gold badges922 silver badges945 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bolt_Head Over a year ago

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.

meder omuraliev Over a year ago

is w3schools really the best resource to reference this? he would have made the same mistake if he used that page as an example.

cletus Over a year ago

w3schools is correct in this case. The issue was a scope issue.

meder omuraliev Over a year ago

w3schools is not correct in many cases and does not promote best practices in web standards. I suggest MDC: developer.mozilla.org/En/Window.setTimeout

Jayapal Chandran Over a year ago

just for your information 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...

meder omuraliev · Accepted Answer · 2009-09-30 03:14:37Z

21

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

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

edited Sep 30, 2009 at 3:14

answered Sep 30, 2009 at 2:58

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

5 Comments

Bolt_Head Over a year ago

I haven't used setInverval before but it appears to be a more direct route of accomplishing my goal. Thanks

meder omuraliev Over a year ago

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

cletus Over a year ago

Passing a code block like 'update()' is valid but not preferred.

Jayapal Chandran Over a year ago

for all users information. api.jquery.com/delay - a very good one if you are going to use only jquery.

haidarvm Over a year ago

this one work as expected ,, wasting time using setTimeout

Goysar · Accepted Answer · 2012-03-15 07:13:58Z

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, 2012 at 7:13

answered Dec 22, 2009 at 4:42

Goysar

5297 silver badges25 bronze badges

1 Comment

kamui Over a year ago

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.

Victor Stoddard · Accepted Answer · 2017-01-29 00:08:11Z

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, 2017 at 0:08

Victor Stoddard

3,7412 gold badges30 silver badges29 bronze badges

Collectives™ on Stack Overflow

JQuery, setTimeout not working

4 Answers 4

5 Comments

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related