JavaScript - Объект window: таймеры

На этом уроке мы познакомимся с таймерами, которые предназначены для вызова кода на языке JavaScript через определённые промежутки времени.

Для работы с таймерами в JavaScript предназначены следующие методы объекта window:

  • setTimeout(), setInterval() - предназначены для установки (активации) таймера. После активации таймер начинает отмерять промежуток времени. После того как определённый промежуток времени отмерен, таймер срабатывает. Срабатывание таймера означает запуск некоторого кода, который указан в качестве параметра метода.
  • clearTimeout(),clearInterval() - предназначены для прекращения работы (остановки) таймера. Данные методы содержат всего один обязательный параметр - это идентификатор (id) таймера, который нужно остановить. Идентификатор (id) таймера можно получить при установке (активации) таймера, т.е. данный идентификатор возвращают методы setTimeout() и setInterval() как результат своего выполнения.

Во время своего выполнения таймер не останавливают работу пользователя с веб-страницей. Это происходит из-за того, что он работает с ней параллельно (асинхронно).

Метод setTimeout() предназначен для вызова кода на языке JavaScript после указанного количества миллисекунд.

window.setTimeout(Параметр_1, Параметр_2);

Метод setTimeout() имеет два обязательных параметра:

  • Параметр_1 - строка, содержащая код на языке JavaScript, который будет вызван в момент срабатывания таймера;
  • Параметр_2 - указывается количество миллисекунд через которые данный таймер сработает.

Для прекращения работы таймера, т.е. для предотвращения вызова кода на языке JavaScript, хранящегося в первом параметре метода setTimeout(), используйте метод clearTimeout(). Данный метод (clearTimeout()) содержит один обязательный параметр - это уникальный идентификатор (id) таймера, который можно получить как результат выполнения метода setTimeout(). Также таймер прекращает свою работу при закрытии окна.

//запустим таймер и получим его идентификатор, который будет храниться в переменной myTimer
//данный таймер выведет сообщение через 4 секунды после выполнения этой строчки
var myTimer = window.setTimeout("alert('Сообщение');",4000);
//после установления таймера его можно остановить с помощью метода clearInterval().
//Для этого необходимо в качестве параметра данному методу передать идентификатор таймера, хранящийся в переменной myTimer.
clearTimeout(myTimer);

Принцип работы с таймерами в JavaScript

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

<script>
  // глобальная переменная, хранящая количество секунд, прошедших с момента нажатия ссылки
  var count=0;
  // глобальная переменная, хранящая идентификатор таймера
  var timer;
  //функция, выполняет следующее:
  //1 - выводит значения переменной count в элемент с id="clock"
  //2 - увеличивает значения переменной на 1
  //3 - запускает таймер, который вызовет функцию timeCount() через 1 секунду
  function timeCount() {
    document.getElementById("countTime").innerHTML = count.toString();
    count++;
    timer = window.setTimeout(function(){ timeCount() },1000);
  }
  //функция проверяет выражение !timer по правилу лжи, если оно истинно, 
  //то вызывает функцию timeCount()
  function startCount() {
    if (!timer)
      timeCount();
  }
    //функция проверяет выражение timer по правилу лжи
	//Если оно истинно, то она вызывает метод clearTimeOut() для прекращения работы таймера
	//и присваивает переменной timer значение null
	function stopCount() {
      if (timer) {
        clearTimeout(timer);
        timer=null;
      }
    }
</script>
...
Счётчик: <span id="countTime"></span>
<br />
<a href="javascript:startCount()">3anycтить процесс</a>
<br />
<a href="javascript:stopCount()">Остановить процесс</a>

Методы JavaScript setTimeout() и clearTimeout()

Метод setInterval() предназначен для вызова кода на языке JavaScript через указанные промежутки времени. Он в отличие от метода setTimeOut() будет вызвать код до тех пор, пока Вы не остановите этот таймер.

window.setInterval(Параметр_1, Параметр_2);

Метод setInterval() имеет два обязательных параметра:

  • 1 параметр представляет собой строку, содержащую код на языке JavaScript (например, вызов функции);
  • 2 параметр задаёт интервал времени в миллисекундах, через который данный код будет вызываться.

Для прекращения работы данного таймера предназначен метод clearInterval(), которому в качестве параметра необходимо передать уникальный идентификатор (id) таймера. Этот идентификатор можно получить при установке таймера, т.е. его возвращает метод setInterval(). Также таймер прекращает свою работу при закрытии окна.

//запустим таймер и получим его идентификатор, который будет храниться в переменной timer1
//данный таймер будет выводить сообщение через каждые 5 секунд
var timer1 = window.setInterval("alert('Сообщение');",5000);
//остановим работу таймера с помощью метода clearInterval().
//Для этого в качестве параметра данному методу передадим идентификатор таймера, хранящийся в переменной timer1.
clearInterval(timer1);

Например, создадим цифровые часы:

<script>
  // глобальная переменная, хранящая идентификатор таймера
  var timer;
  //Функция для запуска таймера
  function startClock() {
    //если переменная timer содержит ложь по правилу лжи (т.е. таймер не запущен)
    if (!timer) {
      //запустить таймер, который будет вызвать функцию outClock() каждую секунду (1с = 1000мс)
      //идентификатор данного таймера сохраним в переменную timer (т.е. теперь переменная timer равна истине по правилу лжи).
      timer = window.setInterval("outClock()",1000);
    }
  }
  // функция для вывода даты и времени в элемент с id="clock"
  function outClock() {
    //переменная, хранящая текущую дату и время
    var nowDateTime = new Date();
    //Выводим строку, содержащую дату и время в элемент с id="clock"
    document.getElementById("clock").innerHTML = nowDateTime.toLocaleTimeString();
  }
  // функция для остановки таймера
  function stopClock() {
    //если переменная timer содержит истину по правилу лжи (т.е. таймер запущен)
    if(timer) {
      //прекращаем работу таймера
      window.clearInterval(timer);
      //присваиваем переменной timer значение null, чтобы таймер опять можно было запустить
      timer=null;
      //Выводим пустую строку в элемент с id="clock"
      document.getElementById("clock").innerHTML="";
    }
  }
</script>
...
<p id="clock"></p>
<a href="javaScript:startClock()">3anycтить таймер</a>
<br />
<a href="javaScript:stopClock()">Остановить таймер</a>

Методы JavaScript setInterval() и clearInterval()



   JavaScript и jQuery 0    2452 0

Комментарии (1)

  1. Alex # 0
    Спасибо, за доходчивую и понятную статью и наглядный пример!

    Вы должны авторизоваться, чтобы оставлять комментарии.