JavaScript setInterval, how to schedule repeated execution with the delay

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 scheduled callback 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 function clearInterval. The timer stops and our callback 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

Learn Full Stack JavaScript