Остановка таймера JavaScript
Вы уже знаете, как запустить таймер, давайте теперь научимся его останавливать. Для этого вам необходимо знать, что каждый таймер, запущенный с помощью функции setInterval , имеет уникальный номер. Этот номер возвращает функция setInterval в момент запуска таймера:
let timerId = setInterval(function() < console.log('!') >, 1000); alert(timerId); // выведет номер таймера
Для остановки таймера используется функция clearInterval , которая принимает уникальный номер того таймера, который нужно остановить.
Для примера давайте запустим таймер, выводящий в консоль числа по возрастанию, начиная с 1 . Остановим таймер, как только на экран будет выведено число 10 :
let i = 0; let timerId = setInterval(function() < console.log(++i); if (i >= 10) < clearInterval(timerId); >>, 1000);
Пусть дана переменная, в которой изначально хранится число 10 . Запустите таймер, который каждую секунду будет уменьшать значение этой переменной на 1 и выводить это значение в консоль. Как только значение переменной достигнет нуля — остановите таймер.
Как остановить/продлить таймер на сайте?
На сайте идёт таймер (04:00). Нужно сделать скрипт для его остановки или продления.
Сайт не мой.
02:54- Вопрос задан более трёх лет назад
- 3825 просмотров
1 комментарий
Оценить 1 комментарий
вы решили свою проблему? если да, то как?
Решения вопроса 0
Ответы на вопрос 2
Stalker_RED @Stalker_RED
Скорее всего там используется setInterval(), и в таком случае, вам достаточно будет добавить две фичи:
1. запомнить текущее значение таймера и остановить его при помощи clearInterval()
2. запустить новый setIntrval с использованием запомненного значения.
Если же там всё не так, то код таймера в студию.
Ответ написан более трёх лет назад
Нравится 1 3 комментария
umpalur90 @umpalur90 Автор вопроса
24.11.2016 20:11:14
(GMT +06:00) У вас есть icq? Как с вами можно связаться?
Stalker_RED @Stalker_RED
umpalur90: У меня есть ICQ, но я не логинился туда несколько лет 🙂
umpalur90 @umpalur90 Автор вопроса
Stalker_RED: Или скайп? Я хотел бы написать вам лично.
umpalur90 @umpalur90 Автор вопроса
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Есть ли метод кеширования iframe стороннего сайта?
- 2 подписчика
- 54 минуты назад
- 36 просмотров
Как остановить таймер js
Откуда программа знать будет, когда мне надо таймер остановить? Нашёл ответ у господина Трепачёва Д.
09 августа 2022
Для отметы таймера, запущенного с помощью setTimeout() , есть специальная функция clearTimeout() . Она принимает на вход идентификатор таймаута, который возвращает setTimeout() и останавливает таймер (переданный колбэк не выполнится).
// запускаем таймер const timerId = setTimeout(() => console.log('hello!'), 1000); // останавливаем таймер clearTimeout(timerId); Для отмены интервала, запущенного с помощью setInterval() , есть схожая функция clearInterval()
// запускаем интервал const timerId = setInterval(() => console.log('hello!'), 1000); // останавливаем clearInterval(timerId); Не смотря на то, что функции clearTimeout() и clearInterval() , рабоают схожим образом и взаимозаменяемы, всё же лучше использовать каждую функцию по своему назначению, то есть с помощью clearTimeout() останавливать таймаут, а clearInterval() останавливать интервал.
Как отключить таймер на сайте, если он вам мешает, а его отключение не предусмотрено:
Как отключить таймер на сайте, если он вам мешает, а его отключение не предусмотрено:
На примере страницы тренировок сайта иностранных языков http://www.memrise.com/course/79104/learn-basic-germa..
1. Установить Stylebot
2. В опциях (левый щелчок мыши по иконке Stylebot в баре плагинов справа-вверху в Chrome)
3. Выбрать «install Style from Social»
4. Установить стиль «timer off on memrise»
5. Во время тренировки нажать на паузу — таймер отключен, но все div остаются видны.
Просто небольшое изменение CSS. javascript функция таймера теперь НЕ МОЖЕТ перекрыть наш стиль display: block своим display: none поскольку стили, которые Stylebot догружает в страницу помечены как !important)) хДД
9 лет назад
А также Stylebot позволяет вручную удалить любой элемент в два клика.
9 лет назад
«. догружает в страницу помечены как !important)) хДД»
Столько смайлов. 
4 года назад
Можете уточнить, таймер отключается только визуально или вообще?
Кто-нибудь пробывал это сделать на сайте https://i-exam.ru/ ?
Похожие посты
19 дней назад
Нерассказанная история веб-разработки
- 1990: HTML придумали
- 1994: CSS придумали, чтобы пофиксить HTML
- 1995: JS придумали, чтобы пофиксить HTML/CSS
- 2006: jQuery придумали, чтобы пофиксить JS
- 2010: AngularJS придумали, чтобы пофиксить jQuery
- 2013: React придумали, чтобы пофиксить AngularJS
- 2014: Vue придумали, чтобы пофиксить React & Angular
- 2016: Angular 2 придумали, чтобы пофиксить AngularJS & React
- 2019: Svelte 3 придумали, чтобы пофиксить React, Angular, Vue
- 2019: React hooks придумали, чтобы пофиксить React
- 2020: Vue 3 придумали, чтобы пофиксить React hooks
- 2020: Solid придумали, чтобы пофиксить React, Angular, Svelte, Vue
- 2020: HTMX 1.0 придумали, чтобы пофиксить React, Angular, Svelte, Vue, Solid
- 2021: React Suspense придумали, чтобы пофиксить React, снова
- 2023: Svelte Runes придумали, чтобы пофиксить Svelte
- 2024: jQuery до сих пор используется на 75% сайтов
1 год назад
Как браузер рендерит веб-страницу
Для фронтенд-разработчиков очень важно знать, как происходит отрисовка веб-страницы на всех этапах: от отправки запроса на сервер до отображения картинки, которую мы видим в браузере.
Чтобы быстро разобраться в основах можно почитать следующие 3 статьи:
- Дока — Как браузер рисует страницы
- Reflow, Repaint, Composite — что это и как это работает?
- Понимание критического пути рендеринга
Затем, чтобы погрузиться в детали — можно прочитать статью:
Статья достаточно большая, поэтому лучше её читать постепенно и не один раз. Я читал раза 3 с перерывами и выписал для себя основные моменты:
- Браузер отправляет запрос на сервер и получает в ответ текстовый HTML файл с заголовком Content-Type: text/html; charset=UTF-8
- Браузер парсит полученный файл и создаёт DOM (Document Object Model)
- Браузер считывает CSS из всех ресурсов и строит CSSOM (CSS Object Model)
- CSSOM не содержит не визуальные элементы: script, meta, title, …
- Для построения CSSOM используются: стандартные стили браузера, авторские стили (которые и пишут разработчики), стандартные стили описанные в W3C CSS и правила каскадного наследования CSS
- Содержит лишь видимые на экране элементы
- Именно это дерево использует бразуер для отображения контента, который мы видим в браузере
- Элементы на странице могут перекрывать друг друга (z-index). Поэтому браузер располагает элементы на различных слоях.
- Каждый слой может рендериться в отдельном потоке.
- Происходит объединение упомянутых выше слоёв
- Слои разделены на тайлы, так как композиция слоёв будет происходить при изменении стилей или размеров окна браузера
- Браузер парсит HTML по мере скачивания (не ждёт скачивания всего документа)
- Парсинг HTML происходит в основном потоке исполнения JavaScript
- Это скрипты, которые приостанавливают парсинг HTML
- Если парсер натыкается на тэг script — парсинг приостанавливается и происходит выполнение скрипта
- Если скрипт находится в отдельном файле, браузер приостанавливает парсинг, скачивает файл, выполняет его (в главном потоке) и лишь потом продолжает построение DOM дерева
- Браузер приостанавливает парсинг, так как мы можем изменять DOM с помощью JavaScript. Иначе мы бы столкнулись с race condition между JavaScript и парсером, ведь JavaScript может модифицировать DOM дерево
- Можно использовать async атрибут тэга script, чтобы не блокировать парсер при скачивании js-файла, файл будет выполенен, как только загрузится.
- Также можно использовать тэг defer, который работает также как async, но выполнение скрипта произойдёт только когда завершится парсинг
- Построение CSSOM происходит в главном потоке
- Построение CSSOM не происходит по мере скачивания (в отличии от построения DOM). CSSOM обновится, когда сторонний файл со стилями будет загружен целиком. Пока стили не загружены, Render Tree не будет обновлено. Поэтому CSS — render blocking ресурс.
- В то же время, построение DOM дерева продолжается.
- Если парсер натыкается на тэг script, то он будет скачан, но не будет выполнен до тех пор, пока не завершится загрузка файла со стилями. Это важно, так как мы можем манипулировать CSS свойствами через JavaScript. Такой CSS называется script-blocking.
Какие статьи помогли вам понять, как браузер рендерит страницу?
Показать полностью
1 год назадОтвет на пост «CSS и авторские права»
Кому интересно — вот код на jQuery, который вставляет мягкие переносы в русские слова и позволяет тексту, выключенному по ширине, быть более плотным и визуально приятным, особенно при малой ширине блока. Легко перепиливается на чистый JS:
$.fn.hyphenate = function() var RusA = «[абвгдеёжзийклмнопрстуфхцчшщъыьэюя]»;
var RusV = «[аеёиоуыэю\я]»;
var RusN = «[бвгджзклмнпрстфхцчшщ]»;
var RusX = «[йъь]»;
//var Hyphen = «\xAD»;
var Hyphen = «»;
var re1 = new RegExp(«(«+RusX+»)(«+RusA+RusA+»)»,»ig»);
var re2 = new RegExp(«(«+RusV+»)(«+RusV+RusA+»)»,»ig»);
var re3 = new RegExp(«(«+RusV+RusN+»)(«+RusN+RusV+»)»,»ig»);
var re4 = new RegExp(«(«+RusN+RusV+»)(«+RusN+RusV+»)»,»ig»);
var re5 = new RegExp(«(«+RusV+RusN+»)(«+RusN+RusN+RusV+»)»,»ig»);
var re6 = new RegExp(«(«+RusV+RusN+RusN+»)(«+RusN+RusN+RusV+»)»,»ig»);
//console.log(this);
this.each(function() var text=$(this).html();
text = text.replace(re1, «$1″+Hyphen+»$2»);
text = text.replace(re2, «$1″+Hyphen+»$2»);
text = text.replace(re3, «$1″+Hyphen+»$2»);
text = text.replace(re4, «$1″+Hyphen+»$2»);
text = text.replace(re5, «$1″+Hyphen+»$2»);
text = text.replace(re6, «$1″+Hyphen+»$2»);
$(this).html(text);
>);
>;Показать полностью
Поддержать
1 год назадКак быстро написать слайдер на JS?
Во многих сайтах и программах уже давным — давно используются такие элементы взаимодейтсвия пользователем, как «Слайдер», по сути это одна большая фотография которую можно переключать с помощью стрелочек или по нажатию на клавиши. Удобно когда на экране мало места, а показать множество фотографий нужно.
Как же создать вот такой слайдер?
Слайдер будет состоять из кусков кода HTML, CSS, JS, писать будем в Codepen.io но это только для удобства, можете перенести к себе на сайт, веб-приложение или в удобное для вас место.
1. Пишем структуру
4. Заполняем объект
Пишем структуру
Наша структура будет состоять из объекта с классом «slider», внутри которого будет две кнопки для переключения, одна с индификатором «left», другая с «right». По середине будет большая фотография с индификатором «slider_image».
Пишем стили
Обнуляем лишние стили и пишем свои для наших элементов, контейнеров, кнопочек и фотографий.
bodyoutline: none;
user-select: none;
font-size: 16px;
>
h1,pmargin: 0;
padding: 0;
>
pmargin-bottom: 10px;
>
atext-decoration: none;
background-color: rgb(50,50,50);
color: white;
padding: 5px 20px;
>
a:hoverbackground-color: rgb(70,70,70);
>
.sliderbackground-color: rgb(230,230,230);
height: 350px;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
>
.slider #slider_imagebackground-color: rgb(50,50,50);
height: 400px;
min-width: 400px;
>
.slider buttonwidth: 70px;
height: 70px;
margin: 30px;
border: none;
border-radius: 100%;
padding: 0;
background: none;
>
.slider button imgwidth: 50px;
height: 50px;
>
.slider #left imgtransform: rotate(180deg);
>
.slider button:hoveropacity: 80%;
cursor: pointer;
>
Пишем скрипт
Для начала создадим объект, внутри которого будет хранить фотографии для слайдера, а именно ссылки на них для вписывания в будущем их в атрибут «src» на главной фотографии с индификатором «slider_image». После ищем все нужные элементы на странице через вставку «document.querySelector» и «document.getElementById». Создаем функции такие как «update()» которые будут отвечать за обновление главной фотографии, дальше будем писать ещё две функции для переключения главной фотографии. При старте страницы нужно вызвать функцию обновления, для подстраивания картинки при старте.
Заполняем объект
Внутри объекта «slider_cfg», пишем номер картинки от 1 до бесконечности, он сам подстроит и сам определит количество, главное соблюдать индификатор, но можно написать и без индификатора по номеру и просто перебирать их. Ещё легче было бы написать в массиве. После указания номера картинки, после «:» пишем ссылку на картинку в скобочках « ‘ ‘ », не забудьте поставить «висячую запятую», то есть как на скриншоте, после каждой записи ставить запятую в конце, даже если запись окончена.
У нас есть рабочий и очень простенький слайдер для переключения фотографий, которые мы заполняем в объект. Все это работает без сбоев и хорошо.