DEV Community

loading...
Cover image for JavaScript setInterval, how to schedule repeated execution with the delay

JavaScript setInterval, how to schedule repeated execution with the delay

coderslang profile image Coderslang: Become a Software Engineer Originally published at learn.coderslang.com on ・2 min read

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);
Enter fullscreen mode Exit fullscreen mode

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
...
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
  }
Enter fullscreen mode Exit fullscreen mode
  • 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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Learn Full Stack JavaScript

Discussion (0)

pic
Editor guide