Skip to main content

Планирование: setTimeout и setInterval

  • Методы setInterval(func, delay, ...args) и setTimeout(func, delay, ...args) позволяют выполнять func регулярно или только один раз после задержки delay, заданной в мс.
  • Для отмены выполнения необходимо вызвать clearInterval/clearTimeout со значением, которое возвращают методы setInterval/setTimeout.
  • Вложенный вызов setTimeout является более гибкой альтернативой setInterval. Также он позволяет более точно задать интервал между выполнениями.
  • Планирование с нулевой задержкой setTimeout(func,0) или, что то же самое, setTimeout(func) используется для вызовов, которые должны быть исполнены как можно скорее, после завершения исполнения текущего кода.
  • Браузер ограничивает 4-мя мс минимальную задержку между пятью и более вложенными вызовами setTimeout, а также для setInterval, начиная с 5-го вызова.

Методы планирования не гарантируют точную задержку. Например, таймер в браузере может замедляться по многим причинам:

  • Перегружен процессор.
  • Вкладка браузера в фоновом режиме.
  • Работа ноутбука от аккумулятора.

Всё это может увеличивать минимальный интервал срабатывания таймера (и минимальную задержку) до 300 или даже 1000 мс в зависимости от браузера и настроек производительности ОС.

setTimeout​

setTimeout позволяет вызвать функцию один раз через определённый интервал времени.

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...);

💥 Передавайте функцию, но не запускайте её Разработчики иногда ошибаются, добавляя скобки () после функции. Это не работает, потому что setTimeout ожидает ссылку на функцию.

Вызов setTimeout возвращает «идентификатор таймера» timerId, который можно использовать для отмены дальнейшего выполнения.

let timerId = setTimeout(...);
clearTimeout(timerId);

setInterval​

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

let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...);

Чтобы остановить дальнейшее выполнение функции, необходимо вызвать clearInterval(timerId).

Вложенный setTimeout​

Есть два способа запускать что-то регулярно. Один из них setInterval. Другим является вложенный setTimeout.

Вложенный setTimeout – более гибкий метод, чем setInterval. С его помощью последующий вызов может быть задан по-разному в зависимости от результатов предыдущего.

Например, необходимо написать сервис, который отправляет запрос для получения данных на сервер каждые 5 секунд, но если сервер перегружен, то необходимо увеличить интервал запросов до 10, 20, 40 секунд… Вот псевдокод:

let delay = 5000;

let timerId = setTimeout(function request() {
  ...отправить запрос...

  if (ошибка запроса из-за перегрузки сервера) {
    // увеличить интервал для следующего запроса
    delay *= 2;
  }

  timerId = setTimeout(request, delay);

}, delay);

Вложенный setTimeout позволяет задать задержку между выполнениями более точно, чем setInterval.

setTimeout с нулевой задержкой​

Особый вариант использования: setTimeout(func, 0) или просто setTimeout(func). Это планирует вызов func настолько быстро, насколько это возможно. Но планировщик будет вызывать функцию только после завершения выполнения текущего кода.

Так вызов функции будет запланирован сразу после выполнения текущего кода.

🚀 Источник: https://learn.javascript.ru/settimeout-setinterval