JS метод Object.clearTimeout()

Загальний опис

clearTimeout() є глобальною функцією, яка відіграє ключову роль у керуванні часовими інтервалами. Вона призначена для скасування запланованих дій, які були встановлені за допомогою setTimeout(). Ця функція має велике значення, коли мова йде про додавання гнучкості до асинхронної поведінки веб-додатків, дозволяючи розробникам контролювати час виконання певних дій.

Основною сутністю clearTimeout() є можливість скасувати запланований за допомогою setTimeout() виклик функції, перш ніж він відбудеться. Це особливо корисно в сценаріях, де виконання певних дій може стати непотрібним або зайвим через зміну стану програми. Наприклад, у веб-додатках, де користувач може скасувати запит, або у ситуаціях, коли потрібно запобігти виконанню функції, якщо певні умови не були виконані.

Щоб використати clearTimeout(), спочатку потрібно створити таймер за допомогою setTimeout(). setTimeout() повертає унікальний ідентифікатор, який потім можна використати як аргумент для clearTimeout(), щоб скасувати заплановану дію.

Ось простий приклад:

let timerId = setTimeout(() => {
  console.log('Цей текст не буде виведений!');
}, 3000);

clearTimeout(timerId);

У цьому прикладі, повідомлення в консолі ніколи не виведеться, оскільки таймер скасовано до його активації.

У більш складних сценаріях clearTimeout() може використовуватися для керування кількома таймерами, а також у випадках, коли потрібно динамічно керувати часовими інтервалами в залежності від користувацьких дій або інших подій. Наприклад, при створенні ігор або інтерактивних анімацій, де таймери потрібно скасовувати або перезапускати на основі дій користувача.

function delayedGreeting() {
  let timerId = setTimeout(() => {
    console.log('Привіт!');
  }, 5000);

  document.getElementById('cancelButton').addEventListener('click', () => {
    clearTimeout(timerId);
    console.log('Вітання скасовано.');
  });
}

delayedGreeting();

У цьому прикладі, якщо користувач натисне кнопку "cancelButton" до того, як мине 5 секунд, виведення вітання в консоль буде скасовано.

Важливо пам'ятати, що якщо clearTimeout() викликається з ідентифікатором таймера, який уже виконався або не існує, він не матиме жодного ефекту. Також, після скасування таймера, ідентифікатор таймера повинен вважатися недійсним і не повинен використовуватися повторно.

Порада:

Завжди вказуйте ідентифікатор таймера (timerId), щоб мати можливість скасувати таймер пізніше. Не залишайте таймери без ідентифікаторів, оскільки це може призвести до небажаних результатів у вашому коді. Наприклад:

const timerId = setTimeout(() => {
 // Робота, яка виконується через певний час
}, 5000);

// Пізніше, можна скасувати цей таймер за допомогою clearTimeout(timerId);

Порада:

Таймери можна використовувати для виконання різних дій, таких як анімація, автоматичне оновлення даних і багато іншого. Важливо слідкувати за тим, як часто вони виконуються, щоб уникнути надмірного навантаження на браузер або сервер.

Приклад таймера для автоматичного оновлення даних кожні 10 секунд:

function updateData() {
 // Оновлення даних
}

const updateInterval = 10000; // 10 секунд
const updateTimerId = setInterval(updateData, updateInterval);

// Для скасування таймера можна використовувати clearInterval(updateTimerId);

Порада:

Пам'ятайте, що функції, які передаються в метод setTimeout() або setInterval(), виконуються асинхронно. Це означає, що вони можуть виконатися пізніше, ніж ви очікуєте, і мають доступ до контексту, в якому вони були створені. Наприклад:

const message = "Привіт з таймера!";
setTimeout(() => {
 console.log(message); // Функція має доступ до змінної message
}, 2000);

Цей приклад демонструє, як функція, передана в setTimeout(), може використовувати змінну message, навіть якщо вона була створена поза контекстом таймера.

Синтаксис

clearTimeout(timeoutID)

Параметри

*timeoutID: Ідентифікатор таймауту, який ви хочете скасувати. Цей ідентифікатор був повернутий відповідним викликом setTimeout().

Return

none: Повертає значення "undefined" (не визначено).

Переглядачі

Переглядач
	1	1	4	4	12

Переглядач
	37	18	4	1

Переглядач
	0.10.0	1.0

Приклади

У цьому прикладі користувач може запустити таймер на 5 секунд за допомогою кнопки "Запустити таймер" і скасувати його, натиснувши кнопку "Скасувати таймер". Використовуючи метод clearTimeout(), ми можемо скасувати виконання функції timerCallback(), яка викликається після закінчення таймера.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/qBgMbKg">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми створюємо простий таймер, який виводить повідомлення після певного інтервалу, і маємо можливість скасувати виведення цього повідомлення за допомогою методу clearTimeout().

// Оголошуємо змінну для збереження ідентифікатора таймера
let timerId;

// Функція, яка виводить повідомлення
function showMessage() {
  console.log("Повідомлення виведене.");
}

// Запускаємо таймер і зберігаємо його ідентифікатор
timerId = setTimeout(showMessage, 5000); // Вивести повідомлення через 5 секунд

// Якщо потрібно скасувати таймер
clearTimeout(timerId); // Таймер скасований

У цьому прикладі ми можемо створити вікно сповіщення, яке автоматично закриється після певного часу, і використовуємо clearTimeout(), щоб скасувати закриття вікна, якщо користувач взаємодіє з ним.

// Оголошуємо змінну для збереження ідентифікатора таймера
let timerId;

// Функція для створення і показу вікна сповіщення
function showNotification() {
  const notification = document.createElement("div");
  notification.textContent = "Це сповіщення автоматично закриється через 5 секунд.";

  // Додаємо сповіщення до документу
  document.body.appendChild(notification);

  // Запускаємо таймер і зберігаємо його ідентифікатор
  timerId = setTimeout(() => {
    document.body.removeChild(notification);
  }, 5000); // Закрити сповіщення через 5 секунд
}

// Викликаємо функцію для показу сповіщення
showNotification();

// Якщо користувач взаємодіє зі сповіщенням і хоче його залишити відкритим
clearTimeout(timerId); // Таймер скасований

JS довідник

JavaScript

Наповнення JS розділу

JS метод Object.clearTimeout()

Загальний опис

Синтаксис

Параметри

Return

Переглядачі

Приклади