Остановить вызов setInterval в JavaScript
Я использую setInterval(fname, 10000); для вызова функции каждые 10 секунд в JavaScript. Можно ли перестать вызывать его на какое-то мероприятие?
Я хочу, чтобы пользователь мог остановить повторное обновление данных.
9 ответов
setInterval() возвращает идентификатор интервала, который можно передать в clearInterval() :
Если вы установите возвращаемое значение setInterval для переменной можно использовать clearInterval чтобы остановить его.
вы можете установить новую переменную и увеличить ее на ++ (count up one) каждый раз, когда она запускается, тогда я использую условный оператор для ее завершения:
Я надеюсь, что это поможет, и это правильно.
ответы выше уже объяснили, как setInterval возвращает дескриптор и как этот дескриптор используется для отмены интервального таймера.
некоторые архитектурные соображения:
пожалуйста, не используйте переменные «без области». Самый безопасный способ-использовать атрибут объекта DOM. Самым простым местом будет «документ». Если обновление запускается кнопкой start / stop, вы можете использовать саму кнопку:
Так как функция определена внутри обработчик щелчка кнопки, вам не нужно определять его снова. Таймер может быть возобновлен, если кнопка нажата снова.
вы можете остановить интервал, когда попробуйте запустить код, прежде чем смотреть UR console browser (F12) . попробуйте комментарий clearInterval (триггер) снова посмотреть консоль, а не украсить? : P
Проверьте пример источника:
уже ответил. Но если вам нужен многофункциональный таймер, который также поддерживает несколько задач с разными интервалами, вы можете использовать my TaskTimer (для узла и браузера).
в вашем случае, когда пользователи нажимают для нарушения обновления данных; вы можете позвонить timer.pause() затем timer.resume() если им нужно повторно включить.
объявить переменную для присвоения значения, возвращаемого из setInterval(. ) и передайте назначенную переменную clearInterval ();
/ / везде, где у вас есть доступ к таймер объявленный выше вызов clearInterval
вы также можете остановить интервал, добавив прослушиватель событий, скажем, кнопку с идентификатором «stop-interval»:
Примечание: интервал все равно будет выполнен, ничего не произойдет.
почему бы не использовать более простой подход? Добавить класс!
просто добавьте класс, который говорит интервалу ничего не делать. Например: on hover.
Я искал этот быстрый и простой подход в течение многих лет,поэтому я публикую несколько версий, чтобы представить как можно больше людей.
How to exit from setInterval
I need to exit from a running interval if the conditions are correct:
3 Answers 3
Pass the value of setInterval to clearInterval.
The timer is decremented every second, until reaching 0.
Updated for ES6
You can scope the variable to avoid polluting the namespace:
Not the answer you're looking for? Browse other questions tagged javascript setinterval or ask your own question.
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.6.10.42345
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Работа с таймерами в 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).