Таймеры в JavaScript

В JavaScript есть функции-таймеры, которые позволяют отсрочить действие или выполнять его через определённый промежуток времени.

Метод setInterval

Для исполнения кода через равные промежутки времени, используется метод "setInterval(X, Y)". В качестве первого параметра X необходимо указать функцию, которая будет исполняться каждые Y миллисекунд. Метод возвращает уникальный идентификатор созданного таймера. Попробуем написать программный код, который выводит в консоль строчку каждые 5 секунд:

function WriteLog(){
   console.log('Мыши любят сыр!');
}

var TimerId = window.setInterval(WriteLog, 5000);

Если загрузить страницу с таким JavaScript кодом, то в консоле будет писаться строчка 'Мыши любят сыр!' каждые 5 секунд. Чтобы прервать выполнение таймера, необходимо использовать метод "clearInterval(X)". Который удаляет таймер с уникальным идентификатором X. Попробуем написать код секундомера с двумя кнопками (старт и стоп) и окном, в котором считаются секунды. На странице получим такой код:

<input type="text" value="1" id="timer"><br>
<input type="submit" value="Старт" onclick="start()"><br>
<input type="submit" value="Стоп" onclick="stop()">

<script>
function Timer(){ // функция таймера (подсчёт количества секунд)
   var elem = document.getElementById('timer');
   elem.value = parseInt(elem.value)+1;
}

function start() { // функция запуска таймера
   window.TimerId = window.setInterval(Timer, 1000);
}

function stop() { // функция остановки таймера
   window.clearInterval(window.TimerId);
}
</script>

Разберёмся по порядку в этом непростом примере. В первых трёх строчках выводится HTML код текстового окна, в котором записано количество секунд. Ниже стоят две кнопки "Старт" и "Стоп", у которых записаны одноимённые (в переводе на английский) функции в событии "onclick". То есть если кликнуть на эти кнопки мышкой, то отсчёт секунд либо запустится, либо остановится.

После HTML кода начинается код JavaScript, в котором есть три функции. Посмотрим их по порядку. Первая функция - "Timer()". Задача этой функции - увеличивать счётчик секунд на единицу. Для этого она читает содержимое элемента с атрибутом "id" равным "timer" и прибавляет к этому значению единицу. А потом записывает полученное значение обратно в текстовое поле. Обратите внимание, что для того чтобы функция считала значение поле числом, используется функция "parseInt()", которая пытается интерпретировать свой аргумент как число. Если эту функцию не использовать то при прибавлении единицы она будет прибавляться к строке и с каждой секундой таймер просто будет показывать всё более длинную строку из единиц: "11111...".

Две последние функции - это "start" и "stop". Они запускают и останавливают таймер. Обратите внимание, что id таймера записывается в глобальную переменную "window." для того, чтобы можно было обращаться к ней из разных функций. Иначе id таймера будет доступно только внутри функции "start" и не будет доступен в "stop", поэтому остановить таймер будет невозможно.

Метод setTimeout

Иногда нужно задержать выполнение функции на определённое время. То есть сделать таймер, который отключится после первого срабатывания. Для этого существует метод "setTimeout(X, Y)", который имеет те же самые параметры, что и "setInterval". То есть X - это название функции, которая будет вызвана, а Y - это задержка после которой функция вызова. Попробуем модифицировать предыдущий пример, чтобы продемонстрировать работу метода. поставим задачу: надо увеличивать счётчик через 5 секунд после нажатия на кнопку "Прибавить единицу":

<input type="text" value="1" id="timer"><br>
<input type="submit" value="Прибавить единицу" onclick="start()"> 

<script>
function Timer(){ // функция таймера (подсчёт количества секунд)
   var elem = document.getElementById('timer');
   elem.value = parseInt(elem.value)+1;
}

function start() { // функция запуска
   window.setTimeout(Timer, 5000);
}
</script>

Запишите такой пример, загрузите страницу с ним и нажмите на кнопку "Прибавить единицу". Через 5 секунд значение в текстовом поле изменится с 1 на 2 и больше меняться не будет, потому что "setTimeout" срабатывает только один раз.