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)

        
        
          
        
      

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

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