Метод setInterval() окна

Определение и использование

setInterval() метод с указанным интервалом времени (в миллисекундах) для вызова функции.

setInterval() Метод периодически вызывает функцию до тех пор, пока не будет вызван clearInterval() или закройте окно.

Комментарий:1 секунда = 1000 миллисекунд.

Совет

Чтобы выполнить функцию один раз, используйте setTimeout() метод.

Чтобы удалить интервал, используйте setInterval() Возвратный идентификатор:

myInterval = setInterval(function, milliseconds);

Затем вы можете остановить выполнение, вызовав clearInterval() для остановки выполнения:

clearInterval(myInterval);

См. также:

Метод clearInterval()

Метод setTimeout()

Метод clearInterval()

Пример

Пример 1

Показывать "Hello" каждый секунду (1000 миллисекунд):

setInterval(function () {element.innerHTML += "Hello"}, 1000);

Попробуйте сами

Пример 2

displayHello вызывается каждый секунду:

setInterval(displayHello, 1000);

Попробуйте сами

Более примеров предоставлено внизу страницы.

Синтаксис

setInterval(function, milliseconds, param1, param2, ...)

Параметры

Параметры Описание
function Обязательно. Функция, которую нужно выполнить
milliseconds

Обязательно. Интервал выполнения.

Если значение меньше 10, используйте 10.
param1, param2, ...

Опционально. Дополнительные параметры, передаваемые функции.

IE9 и более ранние версии не поддерживают.

Возвратное значение

Тип Описание
Число

ID таймера.

Пожалуйста, установите этот id с clearInterval() Используйте вместе, чтобы取消 таймер.

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

Все браузеры поддерживают setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка Поддержка

Более сложные примеры

Пример 3

Отображение времени, как часы:

setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

Попробуйте сами

Пример 4

Остановка часов с помощью clearInterval():

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

Попробуйте сами

Пример 5

Создание динамической ленты прогресса с помощью 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 + '%';
    }
  }
}

Попробуйте сами

Пример 6

Переключение между двумя цветами фона каждые 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);
}

Попробуйте сами

Пример 7

Передайте параметры функции (не работает в IE9 и более ранних версиях):

setInterval(myFunc, 2000, "param1", "param2");

Попробуйте сами

Но если вы используете анонимную функцию, она работает во всех браузерах:

setInterval(function() {myFunc("param1", "param2")}, 2000);

Попробуйте сами