setTimeout & setInterval

Таймеры

Внутренний таймер-планировщик браузера позволяет откладывать вызов функции на определенный период времени. Для этого есть тайм-ауты и интервалы, которые контролируют когда и как часто вызывается функция. Таймеры реализованы в браузере, а не встроены в язык, и доступны на глобальном объекте window.

Тайм-аут​

Метод setTimeout() позволяет запланировать запуск функции через определённое время.

const timerId = setTimeout(callback, delay, arg1, arg2, ...);

• callback - функция, выполнение которое необходимо запланировать.

• delay - время в миллисекундах, через которое callback-функция будет вызвана один раз.

Дополнительные аргументы (arg1, arg2 и т. д.) будут переданы callback-функции во время вызова. Возвращает цифровой идентификатор созданного таймера, который используется для его удаления. .

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

const greet = () => {  console.log("Hello!");};const timerId = setTimeout(greet, 3000);clearTimeout(timerId);

Поскольку мы вызвали clearTimeout(), который исполнится раньше чем будет вызвана функция greet(), таймер с timerId будет удалён и регистрация отложенного вызова greet() отменится. Поэтому в консоль ничего не выведется.

Интервал​

Метод setInterval() - это простой способ повторения кода снова и снова с установленным промежутком времени повторений. Синтаксис и параметры такие же как у setTimeout(). В отличие от setTimeout(), интервал запускает выполнение функции не один раз, а регулярно повторяет её через указанный промежуток времени. Остановить исполнение можно вызовом метода clearInterval(id).

const timerId = setInterval(callback, delay, arg1, arg2, ...);

При клике на кнопку «Start» запустим интервал и будем каждую секунду выводить в консоль строку. Используем Math.random() чтобы строки были разные. По клику на кнопку «Stop» вызовем clearInterval() и передадим идентификатор интервала который надо остановить.

Частота срабатывания счетчика​

У браузерного таймера есть минимальная возможная задержка. В современных браузерах она колеблется примерно от 0 до 4 миллисекунд. В более старых браузерах задержка может быть больше и достигать 15 миллисекунд. По стандарту, минимальная задержка составляет 4 миллисекунды, так что разницы между setTimeout(callback, 1) и setTimeout(callback, 4) нет.

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