Calling the setTimeout function recursively and passing an anonymous function
I am confused about the difference between this syntax:
var timerId;
function clockStart(){
// debugger;
if(timerId){
return;
}
update();
// THIS LINE BELOW *********************************************
var timerId = setTimeout(function(){clockStart()}, 1000);
}
function clockStop(){
timerId = null;
}
function update(){
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if(hours < 10) {
hours = '0'+hours;
}
document.getElementById('hour').innerHTML = hours;
if(minutes < 10){
minutes = 0+minutes;
}
document.getElementById('min').innerHTML = minutes;
if(seconds < 10){
seconds = '0' + seconds;
}
document.getElementById('sec').innerHTML = seconds;
}
I have provided both callable functions, but the main part of this function that I don't understand is why I need to pass an anonymous function to call clockStart () function.
My function works when I use this syntax:
var timerId = setTimeout(function(){clockStart()}, 1000);
But that doesn't work when I use:
var timerId = setTimeout(clockStart(), 1000);
I've been working on these two features and I honestly stumbled upon this by accident. I really don't understand what the anonymous function is doing other than calling my clockStart function. But in my opinion my clockStart () function should be called every second (1000ms) since it calls itself, so why would I need an anonymous function to call it? Shouldn't he refer himself?
If you would like to see the complete digital code of this "watch", please check my link.
source to share
This line:
var timerId = setTimeout(clockStart(), 1000);
calls clockStart()
immediately and passes the return result from this function to setTimeout()
. Since the function doesn't return anything, you effectively do 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 reference to the function to setTimeout()
, which means you don't include parens. When you enable parens, it means execute it now. When you just pass in the name of a function, it's just a function reference (think of it as a handle) that setTimeout()
can be used to call it later. Is this what you want.
When you do this:
var timerId = setTimeout(function(){clockStart()}, 1000)
you just define an anonymous function and pass a reference to that anonymous function to setTimeout()
, which works fine but is not required in this case as you can just pass the name clockStart
like in my third code example above.
Since you asked how a function can call something later, I'll show you a simple example. Here's a function that takes a start value, an end value, an increment, and a callback function. This will call a callback and pass it the value, which it increments until the value exceeds the final 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);
source to share