JavaScript clearTimeout() — скасувати відкладений виклик

Метод clearTimeout() скасовує виклик, запланований через setTimeout() — за його ідентифікатором.

правити

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

На ньому побудований debounce — прийом, без якого не обходиться жоден пошук із підказками: на кожне натискання клавіші скасовуємо попередній відкладений запит і плануємо новий. Запит піде лише тоді, коли людина перестане друкувати.

Скасувати неіснуючий чи вже виконаний виклик безпечно — помилки не буде, просто нічого не станеться.

правити

Порада

Не забувай скасовувати таймери, коли компонент зникає зі сторінки: інакше функція виконається вже після того, як елементів, з якими вона працює, не існує.

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

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

Переглядачі

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

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

Переглядач
clearTimeout	1+	1+	1+	3+	12+	5+

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

Переглядач
clearTimeout	yes	yes	yes	yes

Приклади

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

<input id="search" placeholder="Пошук">

let timer;

document.getElementById('search').addEventListener('input', event => {
    // скасовуємо попередній відкладений запит
    clearTimeout(timer);

    timer = setTimeout(() => {
        console.log('Шукаємо:', event.target.value);
    }, 300);
});