Similar to setTimeout, which executes the callback function once, you can start the repeated execution of the function in JavaScript using setInterval
.
Starting setInterval
timer
In JS, setInterval
has the same params as setTimeout
.
-
callback
- the function that should be called after a delay -
delay
- in milliseconds
The callback
goes into setInterval
as the first argument, followed by the delay
. When executed, setInterval
sets the timer, which will call callback
function each delay
milliseconds.
console.log('START!');
setInterval(() => console.log('bingo'), 2000);
We'll see the message START!
in the console followed by the strings bingo
, printed every 2 seconds on a new line.
START!
bingo
bingo
bingo
...
The function inside of setInterval
can use external variables.
const delay = 2;
let i = 1;
console.log('START!');
setInterval(() => {
console.log(`message ${i}, appeared after ${delay * i++} seconds`), delay * 1000);
The output starts like this:
START!
message 1,
appeared after 2 seconds
message 2,
appeared after 4 seconds
message 3,
appeared after 6 seconds
message 4,
appeared after 8 seconds
And continues forever.
Stopping setInterval
execution
To stop the execution of setInterval
in JavaScript, you should use the function clearInterval
. To understand how it works, let’s go into detail:
-
setInterval
returns the object that holds all the data about the scheduledcallback
execution:
Timeout {
_idleTimeout: 2000,
_idlePrev: [TimersList],
_idleNext: [TimersList],
_idleStart: 141,
_onTimeout: [Function],
_timerArgs: undefined,
_repeat: 2000,
_destroyed: false,
[Symbol(refed)]: true,
[Symbol(asyncId)]: 5,
[Symbol(triggerId)]: 1
}
this object can be saved into the variable
when we don’t need the repeated interval calls anymore, we pass the
Timeout
object into the functionclearInterval
. The timer stops and ourcallback
isn’t called anymore.
Code example:
const delay = 2;
const limit = 2;
let i = 1;
console.log('START!');
const limitedInterval = setInterval(() => {
console.log(`message ${i}, appeared after ${delay * i++} seconds`);
if (i > limit) {
clearInterval(limitedInterval);
}
}, delay * 1000);
Anonymous function inside setInterval
will be called only once.
Then, the condition i > limit
turns true, and the interval will be stopped with clearInterval(limitedInterval)
.
START!
message 1, appeared after 2 seconds
message 2, appeared after 4 seconds
Top comments (0)