Menu
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.
780
If you are requiring the setTimeout functions to execute on the dot, there can be some scenarios when this is not the case. Late timeouts or timeouts that execute inaccurately could be due the following issues: browser or OS is busy with other tasks.
The Basic syntax for setTimeout function is, setTimeout(function() { // Do something after 2 seconds }, 2000); The setTimeout function takes the times in miliseconds. And the block can contain either your jQuery code, or you can also make a call to any function.
We all know that passing a string to setTimeout (or setInterval ) is evil, because it is run in the global scope, has performance issues, is potentially insecure if you're injecting any parameters, etc. So doing this is definitely deprecated: setTimeout('doSomething(someVar)', 10000);
The setTimeout function is a native JavaScript function. It sets a timer (a countdown set in milliseconds) for an execution of a callback function, calling the function upon completion of the timer.
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.
183
setInterval(function() { $('#board').append('.'); }, 1000); You can use clearInterval if you wanted to stop it at one point.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
