В этом руководстве вы узнаете, как использовать функцию JavaScript setInterval() для многократного вызова функции с фиксированной задержкой между каждым вызовом.
setInterval() — это метод объекта window. setInterval() неоднократно вызывает функцию с фиксированной задержкой между каждым вызовом.
Синтаксис:
let intervalID = setInterval(callback, delay,[arg1, arg2, ...]);
В этом синтаксисе:
callback— это функция обратного вызова, которая должна выполняться каждые миллисекундыdelay.delay— это время (в миллисекундах), которое таймер должен задерживать между выполнениями функции обратного вызова.arg1, …argN— это аргументы, которые передаются функции обратного вызова.
setInterval() возвращает числовое, отличное от нуля число, которое идентифицирует созданный таймер. Вы можете передать intervalID в clearInterval(), чтобы отменить тайм-аут.
Обратите внимание, что setInterval() работает так же, как setTimeout(), но повторно выполняет обратный вызов один раз при каждой указанной задержке.
Пример
В следующем примере функции setInterval() и clearInterval() используются для изменения цвета заголовка раз в секунду после нажатия кнопки «Пуск». Если вы остановите кнопку, clearInterval() отменит тайм-аут.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript setInterval Demo</title>
<script>
let intervalID;
function toggleColor() {
let e = document.getElementById('flashtext');
e.style.color = e.style.color == 'red' ? 'blue' : 'red';
}
function stop() {
clearInterval(intervalID);
}
function start() {
intervalID = setInterval(toggleColor, 1000);
}
</script>
</head>
<body>
<p id="flashtext">JavScript setInterval Demo</p>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
</body>
</html>Заключение
setInterval()неоднократно вызывает функцию один раз с фиксированной задержкой между каждым вызовом.setInterval()возвращаетtimeoutID, который можно передать вclearInterval()для отмены тайм-аута.