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() можно записать без префикса 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);
Если функция еще не была выполнена, вы можете остановить выполнение, вызвав метод clearTimeout():
Пример
Тот же пример, что и выше, но с добавленной кнопкой "Stop":
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
Попробуйте сами »
Метод setInterval()
Метод setInterval() повторяет заданную функцию в каждый заданный интервал времени.
window.setInterval(function, milliseconds);
Метод window.setInterval() можно написать без префикса window.
Первый параметр - это функция, которую нужно выполнить.
Второй параметр указывает продолжительность интервала времени между каждым выполнением.
В этом примере выполняется функция под названием "myTimer" раз в секунду (как в цифровых часах).
Пример
Отображение текущего времени:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Попробуйте сами »
В одной секунде 1000 миллисекунд.
Как остановить выполнение?
Метод clearInterval() останавливает выполнение функции, указанной в методе setInterval().
window.clearInterval(timerVariable)
Метод window.clearInterval() можно написать без префикса window.
Метод clearInterval() использует переменную, возвращаемую из setInterval():
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Пример
Тот же пример, что и выше, но добавлена кнопка "Stop time" (остановка времени):
<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>
Попробуйте сами »
Больше примеров
Часы, созданные с временным событием.
