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);

автор: Bond правити

Порада

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

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

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

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

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

автор: Bond правити

Порада

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

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

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

clearTimeout(timeoutID)

Параметри

timeoutID

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

автор: Bond

правити

Повернення

none

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

// Оголошуємо змінну для збереження ідентифікатора таймера
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); // Таймер скасований

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

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

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

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