Клавиша / esc

setInterval()

Регулярно запускает функцию через указанный промежуток времени.

Время чтения: меньше 5 мин

Кратко

Скопировано

setInterval() позволяет регулярно исполнять функцию через указанный промежуток времени.

Пример

Скопировано

Раз в секунду напечатать текст в консоль:

        
          
          const intervalId = setInterval(function() {  console.log('Я выполняюсь каждую секунду')}, 1000)
          const intervalId = setInterval(function() {
  console.log('Я выполняюсь каждую секунду')
}, 1000)

        
        
          
        
      

Как пишется

Скопировано

Функция setInterval() принимает два аргумента:

  • функцию, которая будет регулярно выполняться при истечении таймера;
  • время в миллисекундах между запусками функции.

Возвращает идентификатор установленного таймера. Индикатор передаётся в функцию clearInterval, чтобы остановить регулярное выполнение функции.

Есть вариант вызова setInterval() с произвольным количеством аргументов. Тогда все аргументы после второго будут передаваться в выполняемую функцию:

        
          
          setInterval(function(name, age) {  console.log(`Раз в секунду печатаю имя «${name}» и ${age}`)}, 1000, 'Ivan', 33)// Раз в секунду печатаю имя «Иван» и 33
          setInterval(function(name, age) {
  console.log(`Раз в секунду печатаю имя «${name}» и ${age}`)
}, 1000, 'Ivan', 33)

// Раз в секунду печатаю имя «Иван» и 33

        
        
          
        
      

Этот вариант вызова используется редко.

Как понять

Скопировано

В JavaScript код выполняется по порядку сверху вниз. Если интерпретатор встречает вызов функции, то он сразу выполняет её. Но разработчику может понадобится запланировать вызов функции, чтобы она выполнилась регулярно через заданные промежутки времени. Например, чтобы регулярно проверять обновления данных на сервере.

Запланировать регулярное выполнение функции по расписанию можно с помощью setInterval(). Выполнение setInterval() создаёт активный таймер в окружении браузера. Таймеры имеют числовой идентификатор, он хранится в браузере в списке активных таймеров. Этот идентификатор нужно использовать, чтобы остановить регулярное выполнение функции.

Время между запусками

Скопировано

Указанное вторым аргументом число в миллисекундах обозначает время между запусками функции. При этом не учитывается время работы самой функции.

Рассмотрим пример:

        
          
          let i = 1setInterval(function print() {  console.log(i)  i++}, 1000)
          let i = 1
setInterval(function print() {
  console.log(i)
  i++
}, 1000)

        
        
          
        
      
Схема, в которой изображен запуск функции через одну секунду от начала запуска предыдущей

Если функция выполняется долго, то может сложиться ситуация, когда следующая функция вызывается сразу после завершения текущей, потому что указанное время вышло.

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 Нужно быть абсолютно уверенным, что выполняемая функция отрабатывает быстрее, чем указанный таймер.

setInterval() не гарантирует точный запуск по таймеру, но гарантирует, что предыдущая функция завершила свою работу. Если функция работает дольше указанного времени, то вызовы станут идти один за другим без пауз.

🛠 Если необходимо выжидать время не между запусками функций, как в setInterval(), а между завершениями, то этого можно достичь цепочкой вызовов setTimeout():

        
          
          let timerId;timerId = setTimeout(function work() {  console.log('я выполняюсь через секунду после предыдущей')  timerId = setTimeout(work, 1000)}, 1000)
          let timerId;

timerId = setTimeout(function work() {
  console.log('я выполняюсь через секунду после предыдущей')
  timerId = setTimeout(work, 1000)
}, 1000)

        
        
          
        
      

Схема работы такого кода будет выглядеть иначе:

Схема, в которой изображен запуск функции через одну секунду после окончания предыдущей