JavaScript метод WindowOrWorkerGlobalScope.clearInterval()

JavaScript WindowOrWorkerGlobalScope

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

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

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


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


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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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
Пример использования методов setInterval() и clearInterval() объекта WindowOrWorkerGlobalScope
JavaScript WindowOrWorkerGlobalScope
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.