Question

With the following code I get a clock is not defined error, why?

$(function(){   
    function clock() {
        var nd = new Date();
        var h, m, s;
        h = nd.getHours();
        m = nd.getMinutes();
        s = nd.getSeconds();
        if (h <= 9) h = "0" + h;
        if (m <= 9) m = "0" + m;
        if (s <= 9) s = "0" + s;
        $('#digital-clock .hour').text(h+':');
        $('#digital-clock .min').text(m+':');
        $('#digital-clock .sec').text(s);
    }
    setTimeout('clock()', 1000);
});

Answer 1

Because when you pass a string to setTimeout, the code inside it will be executed in global scope at timeout time. Code in global scope doesn’t have access to any of the local variables present at the time you call setTimeout.

Don’t pass a string to setTimeout, it invariably sucks (it’s basically a deferred eval, and we all hate eval eh?). Instead use a Function object:

setTimeout(clock, 1000);

you can use an inline function expression to create your function too, for example:

setTimeout(function() {
    var nd= new Date();
    ...
}, 1000);