By Bolt_Head


2009-09-30 02:56:01 8 Comments

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.

4 comments

@Victor Stoddard 2017-01-29 00:08:11

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.

@cletus 2009-09-30 02:57:15

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.

@Bolt_Head 2009-09-30 03:00:12

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 2009-09-30 03:03:30

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 2009-09-30 03:25:23

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

@meder omuraliev 2009-09-30 03:28:19

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 2012-02-08 09:03:39

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

@Goysar 2009-12-22 04:42:59

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.

@kamui 2012-03-15 07:59:13

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.

@meder omuraliev 2009-09-30 02:58:18

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

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

@Bolt_Head 2009-09-30 03:10:35

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

@meder omuraliev 2009-09-30 03:14:01

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 2009-09-30 03:26:00

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

@Jayapal Chandran 2012-02-08 09:02:02

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

@haidarvm 2015-08-14 04:08:58

this one work as expected ,, wasting time using setTimeout

Related Questions

Sponsored Content

23 Answered Questions

[SOLVED] How can I refresh a page with jQuery?

60 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

34 Answered Questions

[SOLVED] Add table row in jQuery

28 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 2184779 View
  • 2052 Score
  • 28 Answer
  • Tags:   javascript jquery

40 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 703703 View
  • 2535 Score
  • 40 Answer
  • Tags:   javascript jquery

86 Answered Questions

[SOLVED] How do JavaScript closures work?

17 Answered Questions

[SOLVED] Disable/enable an input with jQuery?

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

53 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

15 Answered Questions

[SOLVED] "Thinking in AngularJS" if I have a jQuery background?

Sponsored Content