Calling the setTimeout Function recursively and passing an anonymous function

Question

I am confused on the difference between this syntax:

var timerId;
 function clockStart(){
    // debugger;
    if(timerId){
      return;
    }
    update();         


        

Answer 1

This line:

var timerId = setTimeout(clockStart(), 1000);

is calling clockStart() immediately and passing the return result from that function to setTimeout(). Since the function doesn't return anything, you're effectively doing this:

clockStart();
var timerId = setTimeout(undefined, 1000);

which obviously doesn't do what you want.

---

You can use this instead:

var timerId = setTimeout(clockStart, 1000);

In this case, you want to pass a function reference to setTimeout() which means you do not include the parens. When you include the parens, that means to execute it NOW. When you just pass the name of the function, that is just a reference to the function (think of it like a handle) by which setTimeout() can call it later. That's what you want.

When you do this:

var timerId = setTimeout(function(){clockStart()}, 1000)

you're just defining an anonymous function and passing a reference to that anonymous function to to setTimeout() which works fine, but is not necessary in this case since you can just pass the clockStart name as in my third code example above.

---

Since you asked about how a function can call something later, I'll show you a simple example. Here's a function that takes a starting value, an ending value, an increment and a callback function. This will call the callback and pass it the value that it's incrementing until the value exceeds the end value.

// define an increment function that will call a callback
// multiple times based on the start, end and increment arguments
function eachIncrement(start, end, increment, callback) {
    // the function argument named callback contains
    // a function reference
    var val = start;
    while (val <= end) {
        // execute the function reference and 
        // pass it the current val
        callback(val);
        val += increment;
    }
}

// define a function that we want to be called later
function processValues(num) {
    // this will get called multiple times with 
    // values 1, 4, 7, 10
}

// set up the increment parameters and pass a function reference
eachIncrement(1, 10, 3, processValues);