По аналогии с setTimeout, который выполняется только один раз, в JavaScript можно запустить повторное выполнение функции через фиксированные промежутки времени. Для этого существует функция setInterval.

Если ты тут впервые, то сначала советую разобраться как работает setTimeout.

Запуск JS таймера setInterval

В JS у setInterval те же параметры, что и у setTimeout.

  • callback - функция которую нужно вызывать
  • delay - задержка в миллисекундах

Первым параметром передаем функцию callback, вторым — задержку delay. После выполнения, setInterval запустит таймер, который будет асинхронно запускать callback каждые delay миллисекунд.

console.log('START!');
setInterval(() => console.log('bingo'), 2000);

В консоли появится сообщения START! и после него, каждые две секунды будет появляться с новой строки слово bingo.

START!
bingo
bingo
bingo
...

В функции внутри setInterval можно использовать внешние переменные.

const delay = 2;
let i = 1;

console.log('START!');
setInterval(() => {
  console.log(`сообщение ${i}, появилось на экране через ${delay * i++} секунд`), delay * 1000);

В консоли появятся такие сообщения:

START!
сообщение 1,
появилось на экране через 2 секунд
сообщение 2,
появилось на экране через 4 секунд
сообщение 3,
появилось на экране через 6 секунд
сообщение 4,
появилось на экране через 8 секунд

Остановка JS таймера setInterval

Чтобы остановить setInterval в JavaScript, нужно использовать функцию clearInterval. Чтобы понять как очистить интервал в JS, разберемся детальнее с тем как он работает:

  • setInterval возвращает объект, которые хранит все данные о периодическом выполнении функции:

    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
}

  • этот объект можно сохранить в переменную

  • когда интервал больше не нужен, передаем объект Timeout в функцию clearInterval. Таймер остановлен и асинхронная функция больше выполняться не будет.

Пример кода:

const delay = 2;
const limit = 2;
let i = 1;

console.log('START!');
const limitedInterval = setInterval(() => {
  console.log(`сообщение ${i}, появилось на экране через ${delay * i++} секунд`)
  
  if (i > limit) {
    clearInterval(limitedInterval);
  }
}, delay * 1000);

Анонимная стрелочная функция внутри setInterval выполнится только дважды. Потом условие i > limit станет истинным и интервал очистится вызовом clearInterval(limitedInterval).

START!
сообщение 1, появилось на экране через 2 секунд
сообщение 2, появилось на экране через 4 секунд