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

Таймер отсчета на JS

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

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

Метод setTimeout()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Создано 03.04.2019 10:09:29

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

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

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

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

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Основы работы с функцией setInterval в JavaScript

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

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

Эта функция работает следующим образом: первым параметром она принимает исходный код функции, а вторым параметром — интервал, через который эта функция будет автоматически вызываться. Второй параметр задается в миллисекундах (1000 миллисекунд = 1 секунда).

Давайте изучим работу функции на каком-нибудь примере. Например, напишем код, который каждую секунду будет что-нибудь выводить в консоль.

Для начала сделаем функцию, выводящую что-нибудь в консоль:

function timer() < console.log('!'); >

А теперь с помощью setInterval заставим созданную нами функцию выполнятся каждую секунду:

setInterval(timer, 1000); function timer() < console.log('!'); >

Не обязательно создавать отдельную функцию — можно просто в первый параметр setInterval передать анонимную функцию, вот так:

setInterval(function() < console.log('!'); >, 1000);

Запустите таймер, который каждые 3 секунды будет что-нибудь выводить в консоль.

Таймеры в JavaScript

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

Метод setInterval

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

function WriteLog() < console.log('Мыши любят сыр!'); >var TimerId = window.setInterval(WriteLog, 5000);

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

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

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

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

Метод setTimeout

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

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

nptit / timer.md

Бывает, что вам для чего-то нужен таймер обратного отсчета, в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на JavaScript в 18 строк кода.

• Установить правильную дату окончания
• Высчитать оставшееся время
• Привести дату к удобному формату
• Вывести данные таймера, как многоразовый объект
• Отобразить часы на странице и остановить их, когда они достигнут нуля

Устанавливаем правильную дату окончания

Во-первых, вам нужно установить правильную дату окончания. Это будет строка в любом из форматов, которые понимает Date.parse() метод. К примеру:

var deadline = '2015-12-31';

var deadline = '31/12/2015';

Или длинный формат

var deadline = 'December 31 2015';

Каждый из этих форматов позволяет вам установить точное время(в часах, минутах, секундах) и временную зону. Например:

var deadline = 'December 31 2015 23:59:59 GMT+02:00';

Высчитываем оставшееся время

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

function getTimeRemaining(endtime) var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor( (t/1000) % 60 ); var minutes = Math.floor( (t/1000/60) % 60 ); var hours = Math.floor( (t/(1000*60*60)) % 24 ); var days = Math.floor( t/(1000*60*60*24) ); return  'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds >; >

Для начала мы создаем переменную t , чтобы хранить оставшееся время. Date.parse() метод встроен в JavaScript и позволяет сконвертировать строку со временем в значение в миллисекундах. Это позволит нам вычитать одно время от другого и получать разницу между ними.

var t = Date.parse(endtime) - Date.parse(new Date());

Приводим дату к удобному формату

Теперь мы хотим перевести миллисекунды в дни, часы, минуты и секунды. Давайте использовать секунды как пример:

var seconds = Math.floor( (t/1000) % 60 );

Разберемся, что здесь происходит.

• Делим миллисекунды на 1000, чтобы перевести их в секунды
• Делим общее число секунд на 60 и сохраняем остаток — вам не нужны все секунды, только те, что остались после того, как минуты были подсчитаны
• Округлите вниз до ближайшего целого значения, потому что вам нужны полные секунды, а не их фракции

Повторите эту логику, чтобы сконвертировать миллисекунды в минуты, часы и дни.

Выводим данные таймера, как многоразовый объект

Когда часы, минуты и секунды готовы, нам нужно вернуть их как многоразовый объект.

return  'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds >;

Этот объект позволяет вам вызывать вашу функцию и получать любое из вычисленных значений. Вот пример, как вы можете получить оставшиеся минуты:

getTimeRemaining(deadline).minutes

Отображаем часы на странице и останавливаем их, когда они достигнут нуля

Сейчас у нас есть функция, которая возвращает нам оставшиеся дни, часы, минуты и секунды. Мы можем строить наш таймер. Во-первых, создайте следующую html структуру для часов:

div id pl-s">clockdiv">div>

Затем напишите функцию, которая будет отображать данные внутри нашего div’а:

function initializeClock(id, endtime) var clock = document.getElementById(id); var timeinterval = setInterval(function() var t = getTimeRemaining(endtime); clock.innerHTML = 'days: ' + t.days + ' ' + 'hours: '+ t.hours + ' ' + 'minutes: ' + t.minutes + ' ' + 'seconds: ' + t.seconds; if(t.total0) clearInterval(timeinterval); > >,1000); >

Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM.

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

• Высчитывать оставшееся время
• Выводить оставшееся время в наш div
• Если оставшееся время = 0 , останавливать часы

Единственное, что осталось, запустить часы следующим образом:

initializeClock('clockdiv', deadline);

Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 18 строк JavaScript кода.

Подготавливаем наши часы для отображения

До стилизации нам будет нужно немного усовершенствовать некоторые вещи.

• Убрать начальную задержку, чтобы таймер показывался незамедлительно
• Сделать скрипт часов более эффективным, чтобы не приходилось непрерывно перестраивать все часы
• Добавить нули по желанию

Убираем начальную задержку

В часах мы используем setInterval , чтобы обновлять отображение каждую секунду. Чаще всего это нормально, кроме начала, где присутствует 1с задержка. Чтобы это исправить, нам нужно обновлять часы один раз до того, как setInterval запускается.

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

В вашем JavaScript замените это:

var timeinterval = setInterval(function() . >,1000);

function updateClock() var t = getTimeRemaining(endtime); clock.innerHTML = 'days: ' + t.days + ' ' + 'hours: '+ t.hours + ' ' + 'minutes: ' + t.minutes + ' ' + 'seconds: ' + t.seconds; if(t.total0) clearInterval(timeinterval); > > updateClock(); // запустите функцию один раз, чтобы избежать задержки var timeinterval = setInterval(updateClock,1000);

Делаем скрипт более эффективным

Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.

Вот html:

div id pl-s">clockdiv"> Days: span class pl-s">days">span>br> Hours: span class pl-s">hours">span>br> Minutes: span class pl-s">minutes">span>br> Seconds: span class pl-s">seconds">span> div>

Теперь сделаем ссылку на эти элементы. Добавьте следующий код прямо после определения переменной clock .

var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds');

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

function updateClock() var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = t.hours; minutesSpan.innerHTML = t.minutes; secondsSpan.innerHTML = t.seconds; . >

Добавляем ведущие нули

Если вам нужны ведующие нули, вы можете заменить код такого вида:

secondsSpan.innerHTML = t.seconds;

secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

Мы рассмотрели, как сделать простой таймер обратного отсчета на JavaScript. Все, что вам осталось, это добавить стили.