JavaScript метод WindowOrWorkerGlobalScope.clearInterval()

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

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

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

Обращаю Ваше внимание на то, что пул идентификаторов, используемых методами setTimeout() и setInterval() являются общими, что означает, что вы можете технически использовать методы clearTimeout() и clearInterval() взаимозаменяемо. Однако для ясности вам следует избегать этого.

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`clearInterval()`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

scope.clearInterval(timeoutID);

timeoutID - Integer

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

Document Object Model (DOM) Level 0

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

Параметр	Описание
timeoutID	Идентификатор таймаута, который вы хотите отменить. Этот идентификатор возвращается соответствующим вызовом метода setInterval(). При передаче недопустимого идентификатора исключение не создается (ничего не происходит).

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript методов setInterval() и clearInterval() объекта WindowOrWorkerGlobalScope</title>
	</head>
	<body>
		<button onclick = "runCounter()">Run counter</button> <!-- добавляем атрибут событий onclick -->
		<button onclick = "clearMyTimeOut()">Clear timeout and reset counter</button> <!-- добавляем атрибут событий onclick -->
		<span id = "counter">0</span>
		<script>
	let timeoutID; // создаем пустую переменную
	let counter = 0; // инициализируем переменную числовым значением

	function showCounter() {
	  counter++; // инкрементируем значение переменной
	  document.getElementById("counter").innerHTML = counter; // находим элемент по id и изменяем его содержимое значением переменной
	}
	function clearMyTimeOut() {
	  clearInterval(timeoutID); // отменяем повторяющееся выполнение программного кода, которое было ранее установлено вызовом метода setInterval()
	  counter = 0; // присваиваем значение переменной
	  document.getElementById("counter").innerHTML = counter; // находим элемент по id и изменяем его содержимое значением переменной
	}
	function runCounter() {
	  timeoutID = setInterval(showCounter, 1000); // задаем таймер, который многократно выполняет функцию каждые 1000 миллисекунд (1 секунда)
	}
		</script>
	</body>
</html>

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

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

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

Результат нашего примера:

Пример использования методов setInterval() и clearInterval() объекта WindowOrWorkerGlobalScope

JavaScript WindowOrWorkerGlobalScope