setTimeout delay doesn't wait for the timeout
setTimeout
takes a function as an argument. You're executing the function and passing the result into setTimeout
(so the function is executed straight away). You can use anonymous functions, for example:
setTimeout(function() { writeNumber.html("1");}, 1000);
Note that the same is true of setInterval
.
You need to wrap your statements in anonymous functions and also stagger your timings -
setTimeout(function(){writeNumber.html("1")},1000);setTimeout(function(){writeNumber.html("2")},2000);setTimeout(function(){writeNumber.html("3")},3000);
If you set everything to 1000
the steps will pretty much run simultaneously as the setTimeout
function will run the task 1 second after you called the function not 1 second after the previous call to the setTimeout
function finished.
Demo - http://jsfiddle.net/JSe3H/1/
You need to use a function reference to be invoked later when the timer expires. Wrap each statement in an anonymous function so that it isn't executed immediately, but rather when the timer expires.
setTimeout(function() { writeNumber.html("1"); },1000);
Also, you want to use a different delay value for each one so that the timers don't expire at the same time. See an updated fiddle at http://jsfiddle.net/RqCqM/