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 секунды, и на странице появится сообщение "Привет":
<button onclick="setTimeout(myFunction, 3000)">Попробуйте </button>
<script>
function myFunction() {
alert('Привет');
}
</script>
Попробуйте сами »
Как остановить исполнение?
Метод clearTimeout()
останавливает выполнение функции, указанной в SetTimeout().
window.clearTimeout(timeoutVariable)
Метод window.clearTimeout()
может быть записан без префикса window.
Метод clearTimeout()
использует переменный возвращаемые setTimeout()
:
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Если функция еще не была выполнена, вы можете остановить выполнение, вызвав clearTimeout()
метод:
Пример
Тот же пример, что и выше, но с добавленной кнопкой "Стоп":
<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>
Попробуйте сами »
Больше примеров
Часы, созданные с помощью события времени