timkl timkl - 1 month ago 5
Javascript Question

setTimeout delay not working

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 on 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();
});

});


Any hint on what I could be doing wrong is highly appreciated :)

Answer

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.