Таймери

Внутрішній таймер-планувальник браузера дозволяє відкладати виклик функції на певний період часу. Для цього є тайм-аути та інтервали, які контролюють, коли і як часто викликається функція. Таймери реалізовані в браузері, а не вбудовані в мову, і доступні на глобальному об'єкті 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, тому що за надто великого завантаження процесора деякі запуски функцій-інтервалів будуть пропущені. Браузери продовжують виконувати тайм-аути та інтервали, навіть якщо вкладка браузера неактивна, але водночас знижують частоту спрацьовування таймерів.