Таймеры (Timing) в JavaScript

Функции таймера позволяют нам выполнять функции в определенное время.

Используя функции таймера, вы можете отложить выполнение кода, чтобы избежать выполнения кода в точный момент триггера события.

В JavaScript есть две функции таймера:

• setTimeout(function, milliseconds) -Выполнение функции(function) после ожидания указанного количества миллисекунд

• setInterval(function, milliseconds) - как и setTimeout(), но функция выполняется повторно (function)

этихsetTimeout()иsetInterval()является методомОбъект окнаMożna zapisać bez przedrostka window.

Метод setTimeout()

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

Грамматика:

window.setTimeout(function, milliseconds)

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

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

Ниже приведен пример, в котором после щелчка по кнопке через 2 секунды будет отображено сообщение警报а:

<button onclick="setTimeout(myFunc, 2000)">Нажмите</button>
<script>
function myFunc() {
　　alert("Hello World");
}
</script>

Стоп выполнения кода

clearTimeout()Метод останавливает выполнение функции,指定的setTimeout().

Грамматика:

window.clearTimeout(var)

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

　　t = setTimeout();
　　clearTimeout(t);

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

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

<button onclick="myFunc()">Нажмите</button>
<button onclick="myStopFunc()">Остановить警报</button>
<script>
var t;
function myFunc() {
　　t = setTimeout(function() { alert("Hello world"); }, 2000);
}
function myStopFunc() {
　　clearTimeout(t);
}
</script>

Метод setInterval()

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

Грамматика:

window.setInterval(function, milliseconds)

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

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

В этом примере функция под названием "startTimer" выполняется каждый секунд (например, цифровой часы):

//Выполнять startTimer() каждые 1 секунду
setInterval(startTimer, 1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}

Стоп выполнения кода

clearInterval()Метод останавливает выполнение функции,指定的setInterval().

Грамматика:

window.clearInterval(var)

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

　　t = setInterval();
　　clearInterval(t);

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

//Выполнять startTimer() каждые 1 секунду
var t = setInterval(startTimer, 1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}
//Отменить использование повторяющегося действия, созданного с помощью setInterval()
function stopTimer() {
　　　clearInterval(t);
}

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

Нажмите на кнопку «Начало подсчета» ниже, чтобы запустить таймер. Нажмите на кнопку «Остановка подсчета», чтобы остановить подсчет:

Нажмите на кнопку «Запуск прогресса» ниже, чтобы запустить полосу прогресса. Нажмите на кнопку «Остановка прогресса», чтобы остановить полосу прогресса: