ClearTimeout: примеры (JAVASCRIPT)

Простые примеры использования

Базовый пример отмены таймера:

const timerId = setTimeout(() => {
    console.log('Это сообщение не появится');
}, 1000);

clearTimeout(timerId);
console.log('Таймер отменен');

Таймер отменен

Отмена таймера внутри его же callback-функции не имеет эффекта, но технически возможна:

const timerId = setTimeout(() => {
    console.log('Сообщение выведено');
    clearTimeout(timerId); // Ничего не делает, так как таймер уже выполнился
}, 10);

Сообщение выведено

Похожие функции в JavaScript

• clearInterval() – отменяет повторяющийся таймер, созданный setInterval(). Используется, когда нужно остановить циклическое выполнение.
• cancelAnimationFrame() – останавливает анимацию, запрошенную через requestAnimationFrame(). Предпочтительна для анимаций в браузере, так как связана с циклом перерисовки.
• AbortController (современный API) – позволяет отменять не только таймеры, но и асинхронные операции, например, fetch-запросы. Более универсальное решение для управления отменой задач.

Выбор функции зависит от типа созданной асинхронной задачи. Для разовых задержек используют связку setTimeout/clearTimeout, для цикличных действий — setInterval/clearInterval.

Распространенные ошибки

Передача некорректного идентификатора:

// Ошибка: передача undefined или null
clearTimeout(undefined); // Без ошибки, но ничего не происходит

// Ошибка: повторное использование одного ID
const id = setTimeout(() => {}, 100);
clearTimeout(id);
clearTimeout(id); // Второй вызов не вызывает ошибки, но бесполезен

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

Использование нечислового ID (в очень старых браузерах мог возвращаться объект, но современные среды возвращают число).

История изменений

Функция clearTimeout() существует с первых версий JavaScript и не претерпела значительных синтаксических изменений. Основные изменения связаны со средой выполнения:

• В Node.js функция доступна в глобальной области без импорта.
• В веб-воркерах функция также доступна.
• Спецификация HTML Living Standard определяет её как часть WindowOrWorkerGlobalScope.

Поведение функции остается стабильным на протяжении многих лет, что обеспечивает обратную совместимость.

Расширенные примеры

Управление группой таймеров:

const timerStore = new Set();

function setManagedTimeout(callback, delay) {
    const id = setTimeout(() => {
        callback();
        timerStore.delete(id);
    }, delay);
    timerStore.add(id);
    return id;
}

function clearAllTimeouts() {
    for (const id of timerStore) {
        clearTimeout(id);
    }
    timerStore.clear();
}

// Пример использования
setManagedTimeout(() => console.log('Timer 1'), 200);
setManagedTimeout(() => console.log('Timer 2'), 300);

// Отмена всех таймеров
clearAllTimeouts();

Использование с промисами и AbortController:

function delayWithAbort(ms, signal) {
    return new Promise((resolve, reject) => {
        const id = setTimeout(resolve, ms);
        signal.addEventListener('abort', () => {
            clearTimeout(id);
            reject(new DOMException('Aborted', 'AbortError'));
        });
    });
}

const controller = new AbortController();
delayWithAbort(2000, controller.signal)
    .then(() => console.log('Done'))
    .catch(e => console.log(e.message)); // 'Aborted'

controller.abort(); // Отмена задержки

Автоматическая отмена при повторном вызове (дебаунс):

let searchTimer;
function searchQuery(query) {
    clearTimeout(searchTimer); // Отменяем предыдущий таймер
    searchTimer = setTimeout(() => {
        console.log(`Ищем: ${query}`);
        // Здесь обычно API запрос
    }, 300);
}

// Симуляция быстрого ввода пользователя
searchQuery('a');
searchQuery('ab');
searchQuery('abc'); // Выполнится только этот поиск через 300 мс

Аналоги в других языках программирования

Python

Используется метод cancel() у объекта таймера из модуля threading.

import threading
def task():
    print('Задача выполнена')

timer = threading.Timer(5.0, task)
timer.start()
timer.cancel()  # Отмена

PHP

Функция clear_timeout отсутствует, так как выполнение скрипта обычно синхронное. Для асинхронных задач могут использоваться расширения, но чаще применяются другие механизмы.

C#

В .NET используют CancellationTokenSource и метод Cancel() для отмены асинхронных операций, что является более комплексным подходом.

var cts = new CancellationTokenSource();
var task = Task.Delay(1000, cts.Token);
cts.Cancel(); // Отмена задержки

Основное отличие от JavaScript в более строгой типизации и интеграции с общей системой отмены задач.