JavaScript Синхронизация событий

❮ Назад Далее ❯

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>

Попробуйте сами »