BOM - События по таймеру

События по таймеру

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

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

Два ключевых метода, которые позволяют это реализовать:

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

Оба метода — setTimeout() и setInterval() — являются методами объекта window.

Метод setTimeout()

Синтаксис:

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

Первый параметр — это вызываемая функция.

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

В следующем примере после нажатия на кнопку через 3 секунды появляется всплывающее окно с сообщением "Привет":

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
    alert('Привет');
}
</script> 

Метод clearTimeout()

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

Синтаксис:

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

Метод clearTimeout() использует переменную, возвращаемую методом setTimeout():

Если функция, срабатывающая по таймеру, еще не была вызвана, то ее выполнение можно остановить вызвав метод clearTimeout().

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

<button onclick="myVar = setTimeout(myFunction, 3000)">Запуск</button>
<button onclick="clearTimeout(myVar)">Остановить</button>

Метод setInterval()

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

Синтаксис:

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

Первый параметр — это вызываемая функция.

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

В следующем примере вызывается функция myTimer, которая выводит текущее время, каждую секунду (как в цифровых часах):

var myVar = setInterval(myTimer, 1000);

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

Внимание! В 1 секунде — 1000 миллисекунд.

Метод clearInterval()

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

Синтаксис:

Метод window.clearInterval() может записываться без префикса window.

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

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

<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>