базовый курс

ГРУППА КУРСА

Таймер в JavaScript

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

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

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

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

Параметры:

функция - функция, которая запускается

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

параметры - параметры, которые можно передать функции

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

HTML код:

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
<div id="cur"></div>

JavaScript:

10
11
12
13
14
15
16
var cur = document.getElementById('cur');
function inform ()
  {
  var current = new Date();
  cur.innerHTML=current.getHours()+' : '+current.getMinutes()+' : '+current.getSeconds();
  }
setInterval(inform, 2000);

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

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

16
17
var timer = setInterval(inform, 2000);
clearInterval(timer);

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

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

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

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

Параметры:

функция - функция, которая запускается

задержка - время в миллисекундах, через которое запустится функция

параметры - параметры, которые можно передать функции

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

HTML код:

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

JavaScript:

18
19
20
21
22
var text = document.getElementById('text');
function usetext () {
  text.innerHTML = 'Этот текст появляется через 5 секунд';
  }
setTimeout(usetext, 5000);

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

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