71 lines
5.5 KiB
Markdown
71 lines
5.5 KiB
Markdown
---
|
||
sidebar_position: 8
|
||
---
|
||
|
||
# Планирование: 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 позволяет вызвать функцию один раз через определённый интервал времени.
|
||
|
||
```js
|
||
let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...);
|
||
```
|
||
💥 Передавайте функцию, но не запускайте её
|
||
Разработчики иногда ошибаются, добавляя скобки () после функции. Это не работает, потому что `setTimeout` ожидает ссылку на функцию.
|
||
|
||
Вызов `setTimeout` возвращает «идентификатор таймера» `timerId`, который можно использовать для отмены дальнейшего выполнения.
|
||
```js
|
||
let timerId = setTimeout(...);
|
||
clearTimeout(timerId);
|
||
```
|
||
## setInterval
|
||
`setInterval` позволяет вызывать функцию регулярно, повторяя вызов через определённый интервал времени.
|
||
Метод `setInterval` имеет такой же синтаксис как `setTimeout`
|
||
|
||
```js
|
||
let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...);
|
||
```
|
||
Чтобы остановить дальнейшее выполнение функции, необходимо вызвать clearInterval(timerId).
|
||
|
||
## Вложенный setTimeout
|
||
Есть два способа запускать что-то регулярно. Один из них `setInterval`. Другим является вложенный `setTimeout`.
|
||
|
||
Вложенный `setTimeout` – более гибкий метод, чем `setInterval`. С его помощью последующий вызов может быть задан по-разному в зависимости от результатов предыдущего.
|
||
|
||
Например, необходимо написать сервис, который отправляет запрос для получения данных на сервер каждые 5 секунд, но если сервер перегружен, то необходимо увеличить интервал запросов до 10, 20, 40 секунд… Вот псевдокод:
|
||
```js
|
||
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](https://learn.javascript.ru/settimeout-setinterval)** |