Таймер в JavaScript

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

Выполнение функции через интервал

Функция setInterval() многократно выполняет какой-то код через определённый интервал.

setInterval (функция, интервал, параметры)

Cоздадим страницу, на которой будет выведено текущее время и будет обновляться каждые две секунды:

HTML код:

<div id="inf"></div>

JavaScript:

let inf = document.getElementById('inf');

function inform ()
  {
  let current = new Date();
  inf.innerHTML = current.getHours() + ' : ' +
    current.getMinutes() + ' : ' +
    current.getSeconds();
  }

setInterval(inform, 2000);

Обратите внимание, первый запуск функции происходит не сразу, а через интервал.

Существует возможность прекратить выполнение функции. Для этого нужен идентификатор таймера. Его возвращает функция, создающая таймер. Идентификатор можно записать в переменную. В нужный момент к таймеру применяется функция clearInterval(), которая прекращает работу этого таймера.

let timer = setInterval(inform, 2000);
clearInterval(timer);

Функция setInterval() запускает функцию чётко через указанный интервал. При этом время работы самой функции не учитывается. В нашем примере текущее время будет обновляться каждые две секунды, независимо от того, сколько времени требуется на обновление страницы. Если время исполнения функции получается больше, чем указанный интервал, то некоторые запуски не срабатывают. Но это не приводит к ошибке, следующий запуск будет выполнен.

Выполнение функции с задежкой

Функция setTimeout() позволяет выполнить какой-то код через определённое время.

setTimeout (функция, задержка, параметры)

Добавим на страницу скрипт, который будет выводить на страницу текст через 5 секунд после запуска:

HTML код:

<div id="text"></div>

JavaScript:

let text = document.getElementById('text');

function usetext ()
  {
  text.innerHTML = 'Этот текст появляется через 5 секунд';
  }

setTimeout(usetext, 5000);

Нужно понимать, что функция setTimeout() не останавлявает работу скрипта. Код, который идёт за ней, продолжает выполняться. А когда пройдёт указанное время, то выполняется функция. Если скрипт выполняется дольше, чем установленная задержка, то функция срабатывает только после выполнения скрипта.

Минимальный интервал, через который срабатывают обе рассмотренные функции, зависит от разных факторов. Самый минимальный, который можно установить - 4 миллисекунды. Меньше устанавливать нет смысла, потому что это самыая большая частота, которая предусмотрена в языке JavaScript. Но если ресурсов процессора не хватает для такой частоты исполнения функций, то интервал увеличивается. Кроме того, если ноутбук работает от батареи, то минимальный интервал значительно увеличивается. Это зависит от устройства и браузера.