Метод setInterval()
Примеры setInterval()
Показывать "ПРИВЕТ" каждую секунду (1000 миллисекунд):
setInterval(function () {element.innerHTML += "ПРИВЕТ"}, 1000);
Попробуйте сами »
Вызов дисплея "ПРИВЕТ" каждую секунду:
setInterval(displayHello, 1000);
Попробуйте сами »
Ещё примеры ниже.
Описание setInterval()
Метод setInterval() вызывает функцию с указанными интервалами (в миллисекундах).
Метод setInterval() продолжает вызывать функцию до тех пор, пока не будет вызван clearInterval() или окно не будет закрыто.
1 секунда = 1000 миллисекунд.
Примечание setInterval()
Чтобы выполнить функцию только один раз, используйте вместо этого метод setTimeout().
Чтобы очистить интервал, используйте id, возвращаемый setInterval():
myInterval = setInterval(function, milliseconds);
Затем вы можете остановить выполнение, вызвав clearInterval():
clearInterval(myInterval);
Похожи на setInterval()
Синтаксис setInterval()
setInterval(function, milliseconds, param1, param2, ...)
Параметры setInterval()
| Параметр | Описание |
|---|---|
| function | Обязательно. Функция для выполнения |
| milliseconds | Обязательно. Интервал выполнения. Если значение меньше 10, используется 10 |
| param1, param2, ... | Необязательно. Дополнительные параметры для передачи в function Не поддерживается в IE9 и более ранних версиях. |
Возвращаемое значение setInterval()
| Тип | Описание |
|---|---|
| Number | Идентификатор таймера. Используйте этот идентификатор с clearInterval() для отмены таймера. |
Ещё примеры setInterval()
Отображение времени как на цифровых часах:
setInterval(myTimer, 1000);
function myTimer()
{
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
Попробуйте сами »
Использование clearInterval() для остановки цифровых часов:
const myInterval = setInterval(myTimer, 1000);
function myTimer() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction()
{
clearInterval(myInterval);
}
Попробуйте сами »
Использование setInterval() и clearInterval() для создания динамического индикатора выполнения:
function move() {
const element = document.getElementById("myBar");
let width = 0;
let id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
element.style.width = width + '%';
}
}
}
Попробуйте сами »
Переключение между двумя цветами фона каждые 500 миллисекунд:
const myInterval = setInterval(setColor, 500);
function setColor() {
let x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myInterval);
}
Попробуйте сами »
Передайте параметры в функцию (не работает в IE9 и более ранних версиях):
setInterval(myFunc, 2000, "param1", "param2");
Попробуйте сами »
Однако если вы используете анонимную функцию, она будет работать во всех браузерах:
setInterval(function() {myFunc("param1", "param2")}, 2000);
Попробуйте сами »
Поддержка браузера setInterval()
setInterval() поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | Да |