Согласие на обработку персональных данных.

02.04.2020
Новый выпуск журнала Автоматизация и программирование.

25.03.2020
Новые видео и статья Как сделать анимацию на JavaScript.

16.03.2020
Новая задача: Найти в строке слова на букву А.

14.03.2020
Новые видео и статья Формы ввода данных в JavaScript.

09.03.2020
Новые видео и статья Картинки в HTML.



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

Таймеры в JavaScript

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

Небольшая книга о JavaScript, которая поможет вам в изучении 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 с нуля до гуру >>>


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

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

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