setTimeout delay doesn't wait for the timeout

Question

I trying to wrap my head around setTimeout, but I can't get it to work properly.

I have set up an example here: http://jsfiddle.net/timkl/Fca2n/

I want a text to countdown after an anchor is clicked - but my setTimeout seems to fire at the same time, even though I've set the delay to 1 sec.

This is my HTML:

<a href="#">Click me!</a>  <span id="target"></span> 

This is my JS:

$(document).ready(function() {   function foo(){      writeNumber = $("#target");          setTimeout(writeNumber.html("1"),1000);     setTimeout(writeNumber.html("2"),1000);     setTimeout(writeNumber.html("3"),1000);     };  $('a').click(function() {  foo(); });  }); 

Answer 1

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.

Answer 2

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/