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

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

Пример 1: Остановка интервала по нажатию кнопки.

let counter = 0;
const intervalId = setInterval(() => {
    console.log(`Прошло ${++counter} сек.`);
    if (counter >= 5) {
        clearInterval(intervalId);
        console.log('Интервал остановлен.');
    }
}, 1000);

// Вывод в консоль:
Прошло 1 сек.
Прошло 2 сек.
Прошло 3 сек.
Прошло 4 сек.
Прошло 5 сек.
Интервал остановлен.

Пример 2: Использование идентификатора, хранящегося в переменной.

let timerId = setInterval(() => console.log('Тик'), 500);
setTimeout(() => clearInterval(timerId), 2000);

// Вывод в консоль (4 раза 'Тик' с интервалом 0.5 сек, затем остановка):
Тик
Тик
Тик
Тик

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

• clearTimeout(timeoutID) — отменяет выполнение отложенного кода, установленного через setTimeout(). Используется для отмены однократного отложенного вызова.
• cancelAnimationFrame(requestID) — останавливает анимацию, запрошенную с помощью requestAnimationFrame(). Предпочтительна для создания плавной анимации в браузере, так как синхронизирована с частотой обновления экрана.
• AbortController — более современный механизм для отмены не только сетевых запросов (fetch), но и любых асинхронных операций. Не является прямой заменой, но решает задачу остановки процессов.

clearInterval следует использовать именно для остановки циклических действий. Для отмены однократных задержек применяется clearTimeout.

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

1. Передача неверного идентификатора. Если в clearInterval передать значение, которое не является валидным ID интервала (например, undefined, число, которое уже было очищено), функция молча проигнорирует вызов, но ошибки не произойдет.

clearInterval(999); // Ничего не произойдет, ошибки нет.
clearInterval(undefined); // Тоже безопасно, но бесполезно.

2. Очистка интервала внутри самого колбэка setInterval без сохранения ID.

// Неверно: переменная intervalId недоступна внутри колбэка.
setInterval(function() {
    console.log('Запуск');
    clearInterval(intervalId); // Ошибка: intervalId не определена
}, 1000);

// Верно: ID сохраняется во внешней переменной.
const intervalId = setInterval(function() {
    console.log('Запуск');
    clearInterval(intervalId);
}, 1000);

3. Попытка использовать clearInterval для ID, возвращенного setTimeout, и наоборот. Это не вызовет ошибку, но не даст желаемого эффекта.

const timeoutId = setTimeout(() => {}, 1000);
clearInterval(timeoutId); // Не остановит таймаут, но и не сломает код.

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

Функция clearInterval() существует с самых ранних версий JavaScript и является частью оригинального API, унаследованного от среды выполнения браузера. Существенных изменений в ее поведении или синтаксисе в последних версиях ECMAScript не было. Ее спецификация стабильна и описана в стандарте WHATWG HTML Living Standard.

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

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

Пример 1: Управление несколькими интервалами с использованием массива.

const intervals = [];
// Запуск нескольких интервалов
for (let i = 0; i < 3; i++) {
    intervals.push(setInterval(() => console.log(`Интервал ${i}`), i * 500 + 500));
}
// Остановка всех интервалов через 3 секунды
setTimeout(() => {
    intervals.forEach(id => clearInterval(id));
    console.log('Все интервалы остановлены.');
}, 3000);

Пример 2: Создание пульсирующего эффекта с автоматической остановкой.

let opacity = 1;
let direction = -0.05;
const element = document.createElement('div');
element.textContent = 'Пульсация';
document.body.appendChild(element);
const pulseId = setInterval(() => {
    opacity += direction;
    element.style.opacity = opacity;
    if (opacity <= 0.2 || opacity >= 1) {
        direction = -direction;
        if (opacity >= 1) {
            clearInterval(pulseId);
            element.textContent += ' (завершено)';
        }
    }
}, 100);

Пример 3: Интеграция с Promise для создания интервала с возможностью отмены извне.

function runInterval(callback, delay, stopAfter) {
    return new Promise((resolve) => {
        const intervalId = setInterval(() => {
            callback();
        }, delay);
        // Автоматическая остановка через stopAfter мс
        setTimeout(() => {
            clearInterval(intervalId);
            resolve('Интервал завершен по времени');
        }, stopAfter);
    });
}
// Использование
runInterval(() => console.log('Работает'), 200, 1000)
    .then(message => console.log(message));

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

Python использует модули threading или asyncio.

import threading
def tick():
    print('Тик')
timer = threading.Timer(1.0, tick)
timer.start()
timer.cancel()  # Отмена выполнения

# Функция tick не будет выполнена.

PHP не имеет прямого аналога в контексте веб-запросов, но для CLI-скриптов можно использовать pcntl_alarm или циклы с проверкой времени.

// Пример с циклом и проверкой флага
$running = true;
while ($running) {
    // ... выполнение действий
    if ($condition) $running = false;
    sleep(1);
}

C (стандартная библиотека): Используются таймеры и сигналы (например, alarm() и signal()), но это низкоуровневый подход, зависящий от ОС.

#include 
#include 
void handle_alarm(int sig) { /* обработка */ }
int main() {
    signal(SIGALRM, handle_alarm);
    alarm(1); // Установить однократный сигнал через 1 сек.
    // ...
    alarm(0); // Отмена предыдущего сигнала alarm
    return 0;
}