Временные события JavaScript

JavaScript может выполнять действия в заданные интервалы времени.

Это так называемые временные события (Timing Events).

Временные события

Объект window позволяет выполнять код с заданным интервалом времени.

Эти временные интервалы называются событиями времени.

два ключевых метода, используемых с помощью JavaScript:

setTimeout(function, milliseconds)
выполняет функцию после ожидания указанного количества миллисекунд.
setInterval(function, milliseconds)
эквивалентен setTimeout(), но выполняет функцию повторно.

setTimeout() и метод setInterval() являются методами HTML DOM Window объекта.

Метод setTimeout()

window.setTimeout(function, milliseconds);

window.setTimeout() метод может быть использован без window Префикс для записи.

Первый параметр - это функция, которая должна быть выполнена.

Второй параметр указывает на количество миллисекунд до выполнения.

Пример

Нажмите кнопку. Подождите 3 секунды, затем на странице появится сообщение "Hello":

<button onclick="setTimeout(myFunction, 3000)">Попробуйте</button>
<script>
function myFunction() {
    alert('Hello');
 }
</script>

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

Как остановить выполнение?

clearTimeout() метод останавливает выполнение setTimeout() указанной функции.

window.clearTimeout(timeoutVariable)

window.clearTimeout() метод может быть использован без window Префикс для записи.

clearTimeout() используя из setTimeout() Возвращаемая переменная:

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

Пример

Аналогично предыдущему примеру, но добавлен "Остановить" кнопка:

<button onclick="myVar = setTimeout(myFunction, 3000)">Попробуйте</button>
<button onclick="clearTimeout(myVar)">Остановить выполнение</button>

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

Метод setInterval()

метод setInterval() метод повторно выполняет указанную функцию через заданный интервал времени.

window.setInterval(function, milliseconds);

window.setInterval() метод может быть использован без window Префикс для записи.

Первый параметр - это функция, которая должна быть выполнена.

Второй параметр указывает на продолжительность интервала между выполнениями.

В этом примере функция "myTimer" выполняется один раз в секунду (как у цифрового часов).

Пример

Отображение текущего времени:

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

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

Одна секунда содержит 1000 миллисекунд.

Как остановить выполнение?

метод clearInterval() метод остановки метод setInterval() выполнение функции, указанной в методе.

window.clearInterval(timerVariable)

window.clearInterval() можно писать без префикса window.

метод clearInterval() метод использует метод setInterval() Возвращаемая переменная:

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

Пример

Как и в предыдущем примере, но мы добавили кнопку "Остановить время":

<p id="demo"></p>
<button onclick="clearInterval(myVar)">Остановить время</button>
<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

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

Больше примеров

Другой простой таймер
Часы, созданные с помощью таймера