JavaScript метод WindowOrWorkerGlobalScope.clearTimeout()

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

JavaScript метод clearTimeout() объекта WindowOrWorkerGlobalScope отменяет выполнение программного кода, ранее отложенного вызовом метода setTimeout().

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

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

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

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

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

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

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

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
clearTimeout	✓1	✓12	✓1	✓4	✓4	✓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.clearTimeout(timeoutID);

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

HTML Standard.

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

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

Отмена отложенного сообщения

Нажмите ▶, затем Show delayed info: через 2 секунды в консоли появится сообщение. Нажмите Clear timeout раньше — clearTimeout() отменит таймер, и сообщение не появится.

index.html

HTML

<button data-example-event-0="">Show delayed info</button>
<!-- добавляем атрибут событий onclick -->
<button data-example-event-1="">Clear timeout</button>
<!-- добавляем атрибут событий onclick -->

main.js

JavaScript

let timeoutID // создаем пустую переменную
function delayedInfo() {
    timeoutID = setTimeout(function () {
        console.log('Текстовое сообщение через 2 секунды')
    }, 2000) //  задаем таймер, который выполняет анонимную функцию по истечению 2000 миллисекунд (2 секунды)
}
function clearMyTimeOut() {
    console.log('Таймер с id ' + timeoutID + ' отменен') // выводим в консоль значение переменной и информацию об отмене таймера
    clearTimeout(timeoutID) // отменяет выполнение программного кода, ранее отложенного вызовом метода setTimeout
}

document.querySelector('[data-example-event-0]').addEventListener('click', function (event) {
    delayedInfo()
})
document.querySelector('[data-example-event-1]').addEventListener('click', function (event) {
    clearMyTimeOut()
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием метода addEventListener() при нажатии на первую кнопку (HTML элемент <button>) вызываем функцию delayedInfo(), которая с использованием JavaScript метода setTimeout() задает таймер, который выполняет анонимную функцию по истечению 2000 миллисекунд (2 секунды).

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