JavaScript метод WindowOrWorkerGlobalScope.clearInterval()

Определение и применение

JavaScript метод clearInterval() объекта WindowOrWorkerGlobalScope отменяет повторяющееся выполнение программного кода, которое было ранее установлено вызовом метода setInterval().

Для того, чтобы задать таймер, который будет многократно выполнять функцию или указанный фрагмент кода по истечению срока заданного тайм-аута воспользуйтесь методом setInterval(). Метод setInterval() возвращает положительное целое ненулевое числовое значение, которое определяет таймер, это значение может быть передано методу clearInterval(), чтобы отменить выполнение программного кода, ранее отложенного вызовом метода setInterval().

Поддержка браузерами

Спецификация: multipage

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.clearInterval

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
clearInterval	✓1	✓12	✓1	✓4	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
Available in workers	✓3	✓12	✓3.5	✓≤12.1	✓4	✓18	✓4	✓≤12.1	✓5	✓1.0	✓4.4	✓5

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

globalThis.clearInterval(intervalID);

Спецификация

HTML Standard.

Значения параметров

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

Счётчик на setInterval() и его остановка

Нажмите ▶, затем первую кнопку: счётчик будет увеличиваться каждую секунду. Вторая кнопка вызовет clearInterval(): счётчик остановится и сбросится.

index.html

HTML

<button data-migration-click-0="">Run counter</button>
<button data-migration-click-2="">Clear timeout and reset counter</button>
<p id="counter">0</p>

main.js

JavaScript

let timeoutID
let counter = 0

function showCounter() {
    counter++
    document.getElementById('counter').innerHTML = counter
}

function clearMyTimeOut() {
    clearInterval(timeoutID)
    counter = 0
    document.getElementById('counter').innerHTML = counter
}

function runCounter() {
    clearInterval(timeoutID) // Повторное нажатие не создаёт второй таймер.
    timeoutID = setInterval(showCounter, 1000)
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    runCounter()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')
document.querySelector('[data-migration-click-2]').addEventListener('click', function () {
    clearMyTimeOut()
})
document.querySelector('[data-migration-click-2]').removeAttribute('data-migration-click-2')

В этом примере с использованием метода addEventListener() при нажатии на первую кнопку (HTML элемент <button>) вызываем функцию runCounter(), которая с использованием JavaScript метода setInterval() задает таймер, который многократно выполняет функцию showCounter() каждые 1000 миллисекунд (1 секунда).

Функция showCounter() в свою очередь инкрементирует (увеличивает на 1) значение переменной counter, с помощью метода getElementById() находит элемент с определенным глобальным атрибутом id и изменяет его содержимое значением переменной counter.

С использованием метода addEventListener() при нажатии на вторую кнопку (HTML элемент <button>) вызываем функцию clearMyTimeOut(), которая с использованием JavaScript метода clearInterval() отменяет повторяющееся выполнение программного кода, которое было ранее установлено вызовом метода setInterval(), устанавливает значение переменной counter равное нулю и добавляет элементу <span> это содержимое.