События времени JavaScript
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript может выполняться с временными интервалами. Это называется синхронизацией событий. |
События времени
Объект windowпозволяет выполнять код через указанные промежутки времени.
Эти временные интервалы называются временными событиями.
Два ключевых метода для использования с JavaScript:
setTimeout(function, milliseconds)
Выполняет функцию после ожидания указанного количества миллисекунд.setInterval(function, milliseconds)
То же, что и setTimeout(), но непрерывно повторяет выполнение функции.
И setTimeout()оба setInterval()являются методами объекта HTML DOM Window.
Метод setTimeout()
window.setTimeout(function, milliseconds);
Метод window.setTimeout()можно записать без префикса окна.
Первый параметр — это функция, которую нужно выполнить.
Второй параметр указывает количество миллисекунд до выполнения.
Пример
Нажмите кнопку. Подождите 3 секунды, и страница уведомит «Привет»:
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Как остановить выполнение?
Метод clearTimeout()останавливает выполнение функции, указанной в setTimeout().
window.clearTimeout(timeoutVariable)
Метод window.clearTimeout()можно записать без префикса окна.
Метод clearTimeout()использует переменную, возвращенную из setTimeout():
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Если функция еще не была выполнена, вы можете остановить выполнение, вызвав clearTimeout()
метод:
Пример
Тот же пример, что и выше, но с добавленной кнопкой «Стоп»:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
Метод setInterval()
Метод setInterval()повторяет заданную функцию через каждый заданный интервал времени.
window.setInterval(function, milliseconds);
Метод window.setInterval()можно записать без префикса окна.
Первый параметр — это функция, которую нужно выполнить.
Второй параметр указывает длину временного интервала между каждым выполнением.
В этом примере функция с именем «myTimer» выполняется каждую секунду (как цифровые часы).
Пример
Отображение текущего времени:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
В одной секунде 1000 миллисекунд.
Как остановить выполнение?
Метод clearInterval()останавливает выполнение функции, указанной в методе setInterval().
window.clearInterval(timerVariable)
Метод window.clearInterval()можно записать без префикса окна.
Метод clearInterval()использует переменную, возвращенную из setInterval():
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Пример
Тот же пример, что и выше, но мы добавили кнопку «Остановить время»:
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>