Раздел: Сайтостроение / JavaScript /

Таймеры в JavaScript

Программирование на JavaScript с Нуля до Гуру 2.0 Программирование на JavaScript

Видеокурс о программировании на JavaScript. Содержит 8 больших разделов от основ до работы с сетевыми запросами. В комплекте 5 подарков - мини-курсов по темам, связанным с сайтостроением. 72 урока продолжительностью более 13 часов. Упражнения и примеры исходных кодов. Поддержка от автора. Подробнее...

Как всегда напоминаю, что полный обучающий курс по 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 с нуля до гуру >>>


Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...
Помощь в технических вопросах Помощь в технических вопросах

Помощь студентам. Курсовые, дипломы, чертежи (КОМПАС), задачи по программированию: Pascal/Delphi/Lazarus; С/С++; Ассемблер; языки программирования ПЛК; JavaScript; VBScript; Fortran; Python и др. Разработка (доработка) ПО ПЛК (предпочтение - ОВЕН, CoDeSys 2 и 3), а также программирование панелей оператора, программируемых реле и других приборов систем автоматизации. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика