Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / JavaScript /
Таймеры в JavaScript
Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>
В программировании, как и в жизни, очень часто необходимо сделать так, чтобы какое-то событие произошло не сейчас, а в будущем, желательно в заданное время. То есть часто возникает потребность подготовить действие, но выполнить его в будущем, а не прямо сейчас.
Простейший пример - будильник. Вы задаёте для него необходимые настройки, и он звенит в указанное вами время.
Практически во всех средствах разработки программ имеются механизмы, позволяющие запланировать и выполнить часть исходного кода в заданное время (или через заданное время). Эти механизмы обычно называются таймерами.
Ядро языка JavaScript не предоставляет такой возможности, но в клиентском
языке JavaScript такая возможность предусмотрена в виде глобальных функций
setTimeout(), clearTimeout(), setInterval() и clearInterval().
Эти функции являются глобальными методами объекта Window.
Метод setTimeout() позволяет выполнить запуск функции через заданное число миллисекунд. Этот метод возвращает значение, которое может
быть передано методу clearTimeout() для отмены запланированного ранее запуска функции.
Метод setInterval() делает то же самое, что и метод
setTimeout(). Но кроме того, он автоматически заново планирует
повторное выполнение функции. Метод setInterval() также
возвращает значение, которое может быть передано методу clearInterval().
В методы setTimeout() и setInterval() желательно передавать функцию, но допускается также передавать строку кода на JavaScript. В этом случае будет выполнена не функция, а переданный программный код. В старых браузерах возможность передачи функций не поддерживается. Поэтому, если вы хотите, чтобы ваши сценарии были совместимы со старыми браузерами, надо передавать в методы именно строку кода, а не функцию.
Таймеры можно использовать, например, для анимации или для задержки выполнения какого-либо участка кода, либо для обратного отсчёта времени и т.п.
Есть некоторые особенности использования таймеров. Даже если установить задержку 0 миллисекунд, таймер может сработать не сразу. Потому что запуск функции будет выполнен только после того, как будут обработаны все события, ожидающие очереди.
Как написать таймер на JavaScript
А теперь небольшой пример:
<script>
function TestTime()
{
document.write("Функция выполнена");
}
document.write("Проверка работы функции setTimeout()");
window.setTimeout('TestTime()', 3000);
</script>
Здесь мы используем функцию setTimeout(). Не забывайте,
что эта функция, как и другие описанные выше, является методом объекта window, поэтому в некоторых случаях придётся явно указывать имя этого объекта перед методом. Хотя в большинстве случаев это необязательно.
Также обратите внимание на то, что имя функции, которое передаётся через
первый параметр метода setTimeout(), должно быть заключено в кавычки, то есть передаваться как строка. Иначе функция будет выполнена сразу - без задержки.
Хотя вообще-то так делать не советуют - лучше передавать именно функцию. Но тогда круглые скобки после имени функции ставить нельзя (см. следующий пример).
Здесь у нас есть простая функция TestTime(), имя которой
передаётся в метод setTimeout(). Второй параметр определяет
время задержки выполнения функции TestTime(). Время указывается
в миллисекундах. То есть в нашем примере функция TestTime() будет выполнена через 3000 миллисекунд (через 3 секунды) после загрузки документа.
Таким образом, мы сначала увидим надпись “Проверка работы функции setTimeout()”, а через три секунды - надпись “Функция выполнена”.
Ещё один пример:
<script>
var Count = 0;
var TimerID = null;
function TestTime()
{
Count++;
document.write("Функция выполнена " + Count + " раз<br>");
if (Count > 5)
{
clearInterval(TimerID);
document.write("Проверка завершена");
}
}
document.write("Проверка работы функции setInterval()");
TimerID = setInterval(TestTime, 1000);
</script>
Здесь мы используем метод setInterval(), который, в отличие от
метода setTimeout(), выполняет код не один раз, а многократно, через указанный во втором параметре промежуток времени.
Чтобы остановить это бесконечное выполнение, надо вызвать метод
clearInterval(), в который передать идентификатор таймера. Как это делается, можно посмотреть в примере.
Пока с таймерами закончим. Хотите знать больше? Тогда вам сюда:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>