setInterval
Метод setInterval имеет такой же синтаксис как setTimeout:
let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)Все аргументы имеют такое же значение. Но отличие этого метода от setTimeout в том, что функция запускается не один раз, а периодически через указанный интервал времени.
Чтобы остановить дальнейшее выполнение функции, необходимо вызвать clearInterval(timerId).
Следующий пример выводит сообщение каждые 2 секунды. Через 5 секунд вывод прекращается:
// повторить с интервалом 2 секунды
let timerId = setInterval(() => alert('tick'), 2000);
// остановить вывод через 5 секунд
setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000);Во время показа alert время тоже идёт
В большинстве браузеров, включая Chrome и Firefox, внутренний счётчик продолжает тикать во время показа alert/confirm/prompt.
Так что если вы запустите код выше и подождёте с закрытием alert несколько секунд, то следующий alert будет показан сразу, как только вы закроете предыдущий. Интервал времени между сообщениями alert будет короче, чем 2 секунды.
Рекурсивный setTimeout
Есть два способа запускать что-то регулярно.
Один из них setInterval. Другим является рекурсивный setTimeout. Например:
/** вместо:
let timerId = setInterval(() => alert('tick'), 2000);
*/
let timerId = setTimeout(function tick() {
alert('tick');
timerId = setTimeout(tick, 2000); // (*)
}, 2000);Метод 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.
Сравним два фрагмента кода. Первый использует setInterval:
let i = 1;
setInterval(function() {
func(i);
}, 100);Второй использует рекурсивный setTimeout:
let i = 1;
setTimeout(function run() {
func(i);
setTimeout(run, 100);
}, 100);Для setInterval внутренний планировщик будет выполнять func(i) каждые 100 мс:
Обратили внимание?
Реальная задержка между вызовами func с помощью setInterval меньше, чем указано в коде!
Это нормально, потому что время, затраченное на выполнение func, использует часть заданного интервала времени.
Вполне возможно, что выполнение func будет дольше, чем мы ожидали, и займёт более 100 мс.
В данном случае движок ждёт окончания выполнения func и затем проверяет планировщик и, если время истекло, немедленно запускает его снова.
В крайнем случае, если функция всегда выполняется дольше, чем задержка delay, то вызовы будут выполняться без задержек вообще.
Ниже представлено изображение, показывающее процесс работы рекурсивного setTimeout:
РекурсивныйsetTimeout гарантирует фиксированную задержку (здесь 100 мс).
Это потому, что новый вызов планируется в конце предыдущего.Сборка мусора и колбэк setTimeout/setInterval
Когда функция передаётся в setInterval/setTimeout, на неё создаётся внутренняя ссылка и сохраняется в планировщике. Это предотвращает попадание функции в сборщик мусора, даже если на неё нет других ссылок.
// функция остаётся в памяти до тех пор, пока планировщик обращается к ней
setTimeout(function() {...}, 100);Для setInterval функция остаётся в памяти до тех пор, пока не будет вызван clearInterval.
Есть и побочный эффект. Функция ссылается на внешнее лексическое окружение, поэтому пока она существует, внешние переменные существуют тоже. Они могут занимать больше памяти, чем сама функция. Поэтому, если регулярный вызов функции больше не нужен, то лучше отменить его, даже если функция очень маленькая.