JavaScript Timeouts
The setTimeout() Method
The setTimeout() method schedules a function to run once after a delay in milliseconds.
It is an asynchronous operation used to delay code execution without freezing the browser.
Waiting for a Timeout
When using the JavaScript function setTimeout(),
you can specify a function to be executed on time-out:
Example
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
In the example above, myFunction is used as a callback.
myFunction is passed to setTimeout() as an argument.
3000 is the number of milliseconds before time-out, so
myFunction() will be called after 3 seconds.
Note
When you pass a function as an argument, remember not to use parenthesis.
Right: setTimeout(myFunction, 3000);
Wrong: setTimeout(myFunction(), 3000);
Instead of passing the name of a function as an argument to another function, you can always pass a whole function instead:
Example
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
In the example above, function(){ myFunction("I love You !!!"); }
is used as a callback. It is a complete function.
The complete function is passed to setTimeout() as an argument.
3000 is the number of milliseconds before time-out, so
myFunction() will be called after 3 seconds.
Waiting for Intervals:
When using the JavaScript function setInterval(),
you can specify a callback function to be executed for each interval:
Example
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
In the example above, myFunction is used as a callback.
myFunction is passed to setInterval() as an argument.
1000 is the number of milliseconds between intervals, so
myFunction() will be called every second.
