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

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

правити

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

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

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

правити

Порада

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

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

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

let timer;

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

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