Programmers use timing events to delay the execution of certain code, or to repeat code at a specific interval.
There are two native functions in the JavaScript library used to accomplish these tasks: setTimeout()
and setInterval()
.
setTimeout
setTimeout()
is used to delay the execution of the passed function by a specified amount of time.
There are two parameters that you pass to setTimeout()
: the function you want to call, and the amount of time in milliseconds to delay the execution of the function.
Remember that there are 1000 milliseconds (ms) in a 1 second, so 5000 ms is equal to 5 seconds.
setTimeout()
will execute the function from the first argument one time after the specified time has elapsed.
Example:
let timeoutID;
function delayTimer() {
timeoutID = setTimeout(delayedFunction, 3000);
}
function delayedFunction() {
alert(“Three seconds have elapsed.”);
}
When the delayTimer
function is called it will run setTimeout
. After 3 seconds (3000 ms) pass, it will execute delayedFunction
which will send an alert.
setInterval
Use setInterval()
to specify a function to repeat with a time delay between executions.
Again, two parameters are passed to setInterval()
: the function you want to call, and the amount of time in milliseconds to delay each call of the function .
setInterval()
will continue to execute until it is cleared.
Example:
let intervalID;
function repeatEverySecond() {
intervalID = setInterval(sendMessage, 1000);
}
function sendMessage() {
console.log(“One second elapsed.”);
}
When your code calls the function repeatEverySecond
it will run setInterval
. setInterval
will run the function sendMessage
every second (1000 ms).
clearTimeout and clearInterval
There are also corresponding native functions to stop the timing events: clearTimeout()
and clearInterval()
.
You may have noticed that each timer function above is saved to a variable. When either the setTimeout
or setInterval
function runs, it is assigned a number which is saved to this variable. Note that JavaScript does this all in the background.
This generated number is unique for each instance of timers. This assigned number is also how timers are identified when you want to stop them. For this reason, you must always set your timer to a variable.
For clarity of your code, you should always match clearTimeout()
to setTimeout()
and clearInterval()
to setInterval()
.
To stop a timer, call the corresponding clear function and pass it the timer ID variable that matches the timer you wish to stop. The syntax for clearInterval()
and clearTimeout()
are the same.
Example:
let timeoutID;
function delayTimer() {
timeoutID = setTimeout(delayedFunction, 3000);
}
function delayedFunction() {
alert(“Three seconds have elapsed.”);
}
function clearAlert() {
clearTimeout(timeoutID);
}