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

Как отключить таймер на сайте, если он вам мешает, а его отключение не предусмотрено: ⁠ ⁠

«. догружает в страницу помечены как !important)) хДД»
Столько смайлов.

Можете уточнить, таймер отключается только визуально или вообще?

Кто-нибудь пробывал это сделать на сайте https://i-exam.ru/ ?

Самый большой проект на бесплатной cms⁠ ⁠

Итак, меня сделали админом этого сообщества 🙂 К сожалению, постов тут нет, так что модерировать особо нечего. Старые посты тоже модерировать уже нельзя 🙂

Попробую исправить ситуацию 🙂 Напишу пост сам и забаню кого-нибудь в комментариях 🙂

Насколько нелепо большие проекты вы писали на простых бесплатных cms? В моей практике, присутствует интернет магазин с собственным движком и практически годом разработки на wordpress и крупный проект в сфере телекома ( https://irt24.ru/ ).

Проект в сфере телекома, продажа интернет и ТВ тарифов, по сути сайт посредник(диллер) продающий тарифы Ростелекома/МТС и прочих через свой функционал.

На старте функционал выглядел не очень большим, на пару месяцев работы, подумаешь парочка тарифов и не такое делали. Максимум 6-8 месяцев, хотя сроки я не взялся сразу точно назвать.

На практике оказалось, что количество параметров редактируемых у этих тарифов физически в админке выглядит как простыня 1000px на 9000px, это сотни параметров различающихся в зависимости от группы тарифов и обладающие сложными взаимосвязями между собой.

Там где на сайте скромный каталог из четырех разделов, в админке скрыто ещё 10-к каталогов взаимосвязанных друг с другом. Тарифы телевидения содержат каналы, каналы распределяются по пакетам каналов, делятся по тематикам итд.

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

Один экран, с настройками роутеров(подобные экраны ещё два вверх, несколько вниз):

На самом сайте, разумеется фунционал тоже реализовывался без лишней скромности и с максимальным размахом. Беглый просмотр функционала Ростелекома и МТС по тематике показал крайнюю их узость и отсутствие массы ценных и необходимых пользователю функций.

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

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

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

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

То есть, если безлимитной мобильной связи среди тарифов со скоростью интернета 500 мб/с нет, то данная опция становится недоступной и мы показываем подсказку почему так произошло.

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

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

Так же, никогда нельзя забывать про мобильные устройства, все должно работать на любом смартфоне/планшете/умном холодильнике(кто знает как жизнь повернется?)

И так, тарифы подобраны, дальше нужно их сравнить. Здесь нужно реализовать функционал сравнения по каждой опции и от щедрой души разрешить сравнивать между собой даже тариф только с интернетом, против тарифа только с ТВ. Вдруг появятся желающие(ценители).

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

Чистый php, общение с базой данных через базовый функционал WP.

Jquery и парочка простых библиотек.

Файлы в коде изолированы по модулям, модуль сравнение содержит все свои стили, скрипты и файлы php шаблонов. То есть, практически автономен, имеет свой css и свой js, не подгружаемые другими модулями. Заметных сложностей с поиском кода не было 🙂

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

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

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

Метод setTimeout()

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

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

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

<button onclick=»setTimeout(goRocket, 5000);»>Пуск</button>
<script>
function goRocket() <
alert('Произошел запуск ракеты');
>
</script>

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

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

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

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

// Внутри параграфа будет выводиться информация
<p ></p>
<script>
timedInfo(); // вызов функции, обязателен, иначе не сработает
function timedInfo() <
setTimeout(one, 1000)
setTimeout(two, 3000)
setTimeout(three, 5000)
>
function one() <
document.getElementById(«rocket»).innerHTML = «Установить связь с центром!»;
>
function two() <
document.getElementById(«rocket»).innerHTML = «Пристегнуть ремни!»;
>
function three() <
document.getElementById(«rocket»).innerHTML = «Контрольная проверка связи!»;
>
</script>
Перезапустите скрипт, нажав на Rerun в правом нижнем углу.

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

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

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

// параграф для вывода значения отсчета
<p ></p>
<script>
let timer; // пока пустая переменная
let x =10; // стартовое значение обратного отсчета
countdown(); // вызов функции
function countdown() < // функция обратного отсчета
document.getElementById('rocket').innerHTML = x;
x—; // уменьшаем число на единицу
if (x<0) <
clearTimeout(timer); // таймер остановится на нуле
alert('Стоп таймер и пуск ракеты!');
>
else <
timer = setTimeout(countdown, 1000);
>
>
</script>
Перезапустите скрипт, нажав на Rerun в правом нижнем углу.

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

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

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

Мы оказались в ситуации условного выбора if-else. Необходимо задать условие, при котором таймер должен остановиться. Если (if) x<0, то таймер остановиться clearTimeout() и выскочит alert «Стоп таймер и пуск ракеты!», в противном случае (else) из переменной timer, вызовется функция обратного отсчета с отсрочкой в 1 секунду и мы увидим, как уменьшаясь на единицу, выводятся числа от 10 до 0.

Заключение

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

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

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

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

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

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

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

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

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

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

Работа с таймерами в JavaScript

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

• Урок №
  Учебник
  по регулярным выражениям
• Урок №
  Работа с регулярными
  выражениями. Глава 1.
• Урок №
  Работа с регулярными
  выражениями. Глава 2.
• Урок №
  Работа с регулярными
  выражениями. Глава 3.
• Урок №
  Работа с регулярными
  выражениям. Глава 4.
• Урок №
  Отличия
  от PHP версии

Разное

• Урок №
  Работа
  с форматом JSON
• Урок №
  Работа
  с куки (cookie)
• Урок №
  Работа
  с локальным хранилищем
• Урок №
  Анимация
  и другие эффекты

Работа с канвасом

• Урок №
  Учебник
  по работе с canvas
• Урок №
  Основы
  работы с canvas
• Урок №
  Продвинутая
  работа с canvas

Практика

• урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
  Работа с
  AJAX в JavaScript —>
  Работа с
  AJAX + PHP —>

Контекст

• Урок №
  Работа
  с контекстом и this
• Урок №
  Продвинутая
  работа с контекстом

Drag-and-Drop

• Урок №
  новая вкладка с new.code.mu
  Доступные события
• Урок №
  новая вкладка с new.code.mu
  Перемещение элемента по окну
• Урок №
  новая вкладка с new.code.mu
  Перемещение на другой элемент
• Урок №
  новая вкладка с new.code.mu
  Объект event.dataTransfer
• Урок №
  новая вкладка с new.code.mu
  Картинка при перетягивании
• Урок №
  новая вкладка с new.code.mu
  Вид курсора

• Урок №
  Введение
  в ООП в стиле ES6
• Урок №
  Основы
  работы с ООП
• Урок №
  Наследование
  классов в JavaScript
  Продвинутая работа
  с классами на JavaScript —>
• Урок №
  Применение
  ООП при работе с DOM
• Урок №
  Практика
  по ООП в JavaScript
• Тут скоро будут еще уроки
  по функциональному и прототипному
  стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

• Урок №
  новая вкладка ютуб
  Игра 5 точек в ряд без ООП для разминки
• Урок №
  новая вкладка ютуб
  Игра 5 точек в ряд ООП вариант
• Урок №
  новая вкладка ютуб
  Хранение массива в локальном хранилище (предварительная теория)
• Урок №
  новая вкладка ютуб
  Стикеры ООП (нужны основы Drag-and-Drop, выше в учебнике есть)

Практика

• Урок №
  новая вкладка с new.code.mu
  Тип Symbol
• Урок №
  новая вкладка с new.code.mu
  Итераторы и генераторы

Promise ES6

• Урок №
  новая вкладка с new.code.mu
  Функции resolve reject
• Урок №
  новая вкладка с new.code.mu
  Метод catch
• Урок №
  новая вкладка с new.code.mu
  Цепочки промисов
• Урок №
  новая вкладка с new.code.mu
  Перехват ошибок
• Урок №
  новая вкладка с new.code.mu
  Promise.all
• Урок №
  новая вкладка с new.code.mu
  Promise.race
• Урок №
  новая вкладка с new.code.mu
  async await
• Урок №
  новая вкладка с new.code.mu
  Загрузка картинок

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

• Урок №
  Учебник
  jQuery для новичков
• Урок №
  Основы
  работы с jQuery
• Урок №
  Манипулирование
  элементами страницы
• Урок №
  Работа
  с набором элементов
• Урок №
  Работа
  с событиями jQuery
• Урок №
  Эффекты и анимация
  библиотеки jQuery
• Урок №
  Практика на отработку
  библиотеки jQuery
• Урок №
  Работа с
  библиотекой jQueryUI
• Урок №
  Популярные плагины
  библиотеки jQuery

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

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

Метод setInterval

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

Пример: window.setInterval(timer, 1000) — этот код будет запускать функцию timer раз в секунду. И каждую секунду эта функция timer будет выполнять какие-то полезные операции, например, увеличивать счетчик на странице.

Давайте рассмотрим нужный для этого код. Пусть у нас дан инпут. Будем каждую секунду увеличивать значение его атрибута value на единицу:

Обратите внимание на функцию parseInt — она преобразует строку из атрибута value в число.

Это нужно, так как атрибут всегда отдает строку, даже если там хранится число, как у нас, то есть elem.value вернет ‘1’, а не 1 (в самом начале таймера, когда в атрибуте еще 1). И получится, что elem.value + 1 это ‘1’+1, что дает ’11’, а не 2).

Поэтому, если не применять parseInt — скрипт начнет складывать наши числа как строки и мы увидим, что в инпуте сначала будет 1, потом 11, потом 111 и так далее.

Если же написать parseInt, то в инпуте будет сначала 1, потом 2, потом 3 и так далее.

Остановка таймера

Вы уже знаете, как запустить таймер, давайте теперь научимся его останавливать. Для этого используется метод clearInterval, который принимает уникальный номер того таймера (созданного через setInterval), который нужно остановить.

Давайте посмотрим откуда берется этот номер:

То есть при создание таймера через setInterval мы можем узнать его номер, и потом передать его методу clearInterval, чтобы таймер остановился.

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

Запустите этот код и понажимайте на кнопки. Кнопка start будет запускать таймер, а кнопка stop — останавливать. Причем таймер можно запускать и останавливать много раз — счетчик в инпуте продолжит с того места, где он остановился. Только в window.timerId при каждом новом запуске будет лежать новое значение.

Если еще один нюанс — если много раз понажимать на кнопку start, не нажимая stop, то вы запустите много таймеров, каждый из которых будет менять содержимое инпута. И получится так, что значения атрибута value будут меняться не раз в секунду, а гораздо чаще (и неравномерно). При этом кнопка stop сможет остановить только последний таймер (так как каждый новый таймер будет затирать глобальную переменную window.timerId и там всегда будет лежать номер последнего запущенного таймера).

Метод setTimeout

Следующий метод, который нам нужен, называется setTimeout. Он позволяет сделать задержку перед запуском кода (эта задержка случится только один раз и код выполнится только один раз, в отличии от setInterval).

Как остановить/продлить таймер на сайте?

На сайте идёт таймер (04:00). Нужно сделать скрипт для его остановки или продления.
Сайт не мой.

• Вопрос задан более трёх лет назад
• 3367 просмотров

Оценить 1 комментарий

• Facebook
• Вконтакте
• Twitter

Скорее всего там используется setInterval(), и в таком случае, вам достаточно будет добавить две фичи:
1. запомнить текущее значение таймера и остановить его при помощи clearInterval()
2. запустить новый setIntrval с использованием запомненного значения.