Как сделать таймер node js

Обновлено: 06.07.2024

Метод setTimeout — это встроенная функция JavaScript, устанавливающая таймер обратного отсчета (в миллисекундах) для выполнения функции обратного вызова по завершении заданного времени.

Представьте, что у вас появилась задача сделать всплывающее окно с приветствием, отображаемое через две секунды после того, как пользователь зашел на сайт. Или же необходимо воспроизвести звук через секунду после объявления победителя в онлайн-игре. В такой ситуации вам не нужно, чтобы функция запускалась немедленно. Надо отложить ее выполнение или запустить через определенный интервал времени.

Как реализовать такую задумку? Именно для решения подобных задач в JavaScript существуют два метода объекта window: setTimeout и setInterval . В этой статье мы рассмотрим их грамотное использование и практическую реализацию.

Метод setTimeout

Метод setTimeout запускается только один раз за вызов, а значит после завершения выполнения функции setTimeout прекращает свою работу.

Основной и наиболее часто используемый синтаксис этой функции:

setTimeout (функция обратного вызова, задержка в миллисекундах)

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

setTimeout () позволяет нам назначить столько аргументов, сколько необходимо для функции обратного вызова. Предположим, что мы хотим поприветствовать Джона — пользователя, вошедшего в нашу систему. Для этого нам необходимо просто добавить аргументы в конец списка параметров setTimeout :

setTimeout (функция обратного вызова, задержка в миллисекундах, arg1)

Посмотрим, как это реализовать:

Важно: не передавайте аргументы функции обратного вызова напрямую и не ставьте скобки после имени функции внутри метода setTimeout , если аргументов нет!

Глядя на код предыдущего примера у вас может возникнуть соблазн передать аргументы в качестве параметров функции обратного вызова. Например:

SetTimeout (Greet(loggedInUser), 2000);

Это логическая ошибка. В приведенной выше строке кода функция обратного вызова выполняется немедленно, а параметр задержки уже не воспринимается интерпретатором. Получается, что мы не передаем объект функции в качестве метода обратного вызова в setTimeout () , а скорее устанавливаем возвращаемое значение функции. В такой ситуации таймер будет проигнорирован.

Функция clearTimeout

Иногда бывают ситуации, когда нам нужно отменить начавшуюся временную задержку. Что делать в этом случае? Метод setTimeout () возвращает ключ, позволяющий ссылаться на выполнение callback-функции. Мы можем использовать этот ключ как кнопку прерывания, тем самым взяв в свои руки контроль над самим механизмом тайм-аута. Например:

const timerId = setTimeout(Greet, 5000, loggedInUser);

Здесь timerId — тот самый ключ, используемый для ссылки на текущий таймер. Чтобы отменить тайм-аут, этот ключ нужно передать функции clearTimeout () в качестве параметра:

При использовании clearTimeout() происходит отмена таймера, и функция обратного вызова внутри метода не сработает.

Метод setInterval

Метод setInterval используется для повторного выполнения функции по истечении определенного периода времени. Схема построения этого метода следующая:

const timerID = setInterval(function, delay, arg1, arg2, . )

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

Синтаксис этого метода очень похож на синтаксис setTimeout , но в отличие от последнего, setInterval запускает функцию несколько раз, пока она не будет отменена. Например:

В примере метод будет повторно выводить в консоль Hello John каждые три секунды.

Чтобы остановить непрерывный вызов функции setInterval , используется метод clearInterval() . Он принимает идентификатор таймера в качестве аргумента и использует этот идентификатор для остановки таймера.

Вернемся к нашему примеру:

Функция sayHello будет выполнена всего три раза.

Вы можете задаться вопросом, почему оператор if находится внутри функции, а не за ее пределами, вот так:

Для того чтобы ответить на него, необходимо разобраться, как JavaScript выполняет рассматриваемые нами методы. В отличие от других языков, в JS — один поток для решения задач, выполняемый построчно. Это значит, что каждая строка кода должна завершить свое выполнение, прежде чем переходить к следующей. Другими словами, выполнение остального кода блокируется.

Но есть операции ввода-вывода, которые не блокируются. Они обрабатываются базовым механизмом. К ним относятся:

получение данных через Ajax;
метод setTimeout ;
метод setInterval .

Поэтому JavaScript не ждет, пока функция обратного вызова, переданная методу setTimeout или setInterval , завершит выполнение прежде, чем перейти к следующей задаче или строке кода.

Следовательно, если бы мы прописали реализацию метода вторым способом, таймер не перестал бы работать, ведь после выполнения строки let timerID = setInterval(sayHello, 3000, "John") JavaScript перешел бы к следующему блоку кода if (counter === 3) и условие не выполнилось бы.

Рекурсивный setTimeout

Метод setInterval запускает функцию каждые n миллисекунд, не обращая внимания на то, когда она завершится.

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

Функция срабатывает с одним и тем же временным интервалом

Но бывают случаи, когда время выполнения меняется в зависимости от условий сети, например:

Время выполнения может меняться

Или перекрывает следующее:

Время выполнения перекрывает следующее за ним

Чтобы избежать последствий подобных случаев, вы можете запланировать рекурсивный вызов setTimeout по завершении функции обратного вызова.

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

C рекурсивным setTimeout мы можем изменять последующий вызов, исходя из результата предыдущего.

Схема здесь такая:

Фиксированная временная задержка

Другими словами, такой подход дает фиксированную временную задержку, ведь новый вызов планируется, когда закончился вызов перед ним.

Что надо помнить

На функцию из рассматриваемых методов создается внутренняя ссылка и прописывается в планировщик. Сохранившись там, она не попадет в Garbage Collector даже в том случае, когда на нее ничто не ссылается. Функцию же setInterval сотрет из памяти только метод clearInterval .

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

Нулевая задержка

Это связано с особенностью некоторых браузеров запускать таймер на неактивной странице. Этим грешат Google Chrome, Firefox, IE10. На частоту запуска функции также влияют загрузка процессора и режим экономии энергии разряженной батареи при работе на ноутбуке.

Пример использования метода

Примечание: если методу clearTimeout передан неправильный идентификатор, то изменений не произойдет. Поэтому здесь можно не проверять работу таймера и содержимое timerId .

В JavaScript имеются методы, которые позволяют вызвать функцию не сразу, а через некоторый промежуток времени (в асинхронном режиме). Называются они setTimeout и setInterval .

Отличаются они друг от друга лишь тем, что setTimeout выполняет вызов функции всего один раз, а setInterval – постоянно через указанный интервал времени.

Синтаксис setTimeout и setInterval :

func – функция, которую нужно вызвать спустя указанное в delay количество миллисекунд;
delay – количество миллисекунд по истечении которых нужно выполнить func ;
arg1, arg2, . – дополнительные аргументы, которые нужно передать в func .

Например, вызовем функцию myFunc один раз по прошествии 3 секунд:

Другими словами, когда браузер доходит до исполнения setTimeout , он как бы помещает функцию myFunc в некоторое место, а затем по прошествии определённого количества времени её вызывает. При этом блокировка основного потока выполнения программы не происходит.

Чтобы более подробно разобраться в этом необходимо рассмотреть, как движок JavaScript выполняет синхронный и асинхронный код , а также что такое event loop и как он работает .

Синхронный и асинхронный код

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

Выполнение такого кода движок JavaScript выполняет последовательно (т.е. строчку за строчкой). При этом перед тем, как выполнить какую-то строчку кода интерпретатор сначала помещает её в стек вызовов ( call stack ). Именно в нём происходит её разбор и исполнение. После этого происходит её извлечение из стека и переход к следующей строчке.

Но всё меняется, когда интерпретатор доходит до выполнения асинхронных операций, например setTimeout . Они также как и синхронные операции сначала попадают в стек вызовов, где происходит их разбор. Но, при разборе интерпретатор понимает, что это некоторый вызов Web API и помещает эту операцию в него. После этого он удаляет эту строчку из call stack и переходит к выполнению следующей строчки кода.

В это же время Web API регистрирует эту функцию и запускает таймер. Как только он завершается, он помещает эту функцию в очередь (callback queue). Очередь – это структура данных типа FIFO. Она хранит все функции в том порядке, в котором они были туда добавлены.

Очередь обратных вызовов (callback queue) обрабатывает цикл событий (event loop). Он смотрит на эту очередь и на стек вызовов (call stack). Если стек вызовов пуст, а очередь нет – то он берёт первую функцию из очереди и закидывает её в стек вызовов, в котором она уже выполняется. Вот таким образом происходит выполнения асинхронного кода в JavaScript.

Если функцию myFunc необходимо вызывать не один раз, а постоянно через каждые 3 секунды, то тогда вместо setTimeout следует использовать setInterval :

Пример, с передачей функции аргументов:

Пример, с использованием в setTimeout анонимной функции:

В setTimeout и setInterval можно также вместо функции передавать строку с кодом, который нужно выполнить через определённый интервал времени. Но этот вариант использовать не рекомендуется по тем же причинам, что и функцию eval .

Если функция setTimeout по каким-то причинам не работает, то проверьте действительно ли вы передаёте ссылку на функцию, а неё результат:

Отмена таймаута (clearTimeout)

Метод setTimeout в результате своего вызова возвращает нам некий идентификатор таймера, который затем мы можем использовать для его отмены.

Синтаксис отмены таймаута:

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

Пример

Задача. Перепишите этот пример с использованием методов setInterval и clearInterval .

Методы setInterval и clearInterval

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

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

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

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

Таймер в JS нужен для запуска функции (некий набор действий), через заданное количество времени. Без таймера эта функция так и так бы запустилась, но здесь ключевой момент – отсроченный запуск во времени.

Простой пример из жизни. Запуск ракеты в космос (это функция) не происходит спонтанно, а по таймеру обратного отсчета.

Метод setTimeout()

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

setTimeout(имя_функции, миллисекунды); // 1000 = 1 с

Код ниже, при клике по кнопке, запустит alert окно через 5 секунд.

Рассмотрим ниже несколько примеров, области применения setTimeout().

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

Таймер отсчета (вперед)

Вернемся к нашим ракетам. Перед стартом ракеты, на табло поочередно выводится информация, через заданные промежутки времени.

// Внутри параграфа будет выводиться информация

Перезапустите скрипт, нажав на Rerun в правом нижнем углу.

Таймер обратного отсчета

Ракета и экипаж уже готовы к полёту и мы запускаем таймер обратного отсчета. Задекларируем переменную x, где будет храниться стартовое число 10. Создадим функцию countdown(), задачей которой будет вывод в параграфе значения обратного отсчета, уменьшаемого на единицу x--.

В начале скрипта мы объявили пустую переменную timer. Присвоим ей запуск таймера setTimeout(countdown, 1000), через 1 секунду.

// параграф для вывода значения отсчета

Перезапустите скрипт, нажав на Rerun в правом нижнем углу.

После вызова функции countdown(), пошел обратный отсчет, перевалил за ноль и ушел в минус. Так ракета никогда не взлетит, пока работает таймер. Что делать?

Как остановить таймер?

Почему таймер уходит в минус (популярный вопрос на форумах)? Такая проблема возникает у новичков на таймере обратного отсчета, если не использовать метод clearTimeout().

Мы оказались в ситуации условного выбора if-else. Необходимо задать условие, при котором таймер должен остановиться. Если (if) x

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

В этой статье вы узнаете как сделать простой таймер на js (JavaScript), если вы новичок и давно хотите сделать счётчик времени, то вам однозначно надо посмотреть эту статью.

Также надо сказать, что подобную статью уже ест на нашем сайте, но там мы делали отсчёт времени до определённой даты (Смотреть здесь), тут же мы реализуем простой таймере.

Подготовка:

Для начала подготовим HTML файл в котором у нас будет форма, куда будем вписывать сколько минут надо отсчитать, и кнопка запуска, также блок куда будет выводится сколько осталось времени.

Читайте также: