Как остановить setinterval javascript
Перейти к содержимому

Как остановить setinterval javascript

  • автор:

Остановка таймера 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 и выводить это значение в консоль. Как только значение переменной достигнет нуля — остановите таймер.

Как остановить setinterval?

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

function timer(flag) < var intervalId = setInterval (function()if (flag == 'false') < clearInterval(intervalId); >> 

Вызываю эту функцию с параметром false

timer('false'); 

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

$("#cimg2").click(function(event) < timer('false');//останавливает таймер . код//выполняет нужный мне код timer();//опять запускается таймер >

Не работает и не останавливает. Убирал timer(); в $(«#cimg2»).click(function(event) , чтобы проверить, остановит ли он таймер, — не остановил. Не могу понять, почему в данном случае он не останавливает таймер, и как сделать, чтобы заработал.

Как отменить SetInterval?

Документ разделен по высоте на 2 части до 600px и от 600px.
Когда прокручиваем 600px и более включается таймер от 60 до 0 сек.
Если прокрутим назад, например до 500px, то таймер нужно остановить и сбросить до 60сек.

Что сделал: При прокрутке 600px, включаю таймер и добавляю класс timer, чтобы при прокрутке вниз таймер еще раз не запустился.
Но когда прокручиваю назад до 500px, не знаю как его остановить.

И возможно есть более элегантное решение, чем применять класс.
PS. В рабочем проекте, у меня 6 областей по высоте.

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

Комментировать
Решения вопроса 1

Tolly

Анатолий @Tolly Автор вопроса

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

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 3

Vlad_IT

Владимир Проскурин @Vlad_IT Куратор тега JavaScript
Front-end разработчик

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

let el = document.getElementById('a'); function func() < let timeId; const handleScroll = () => < let scrollPos = window.pageYOffset; document.getElementById('z').innerHTML = scrollPos; if(scrollPos >600) < if(!el.classList.contains('timer')) < el.classList.add('timer'); let b = 60; timeId = setInterval(() => < b--; el.innerHTML=b; if(b == 0)< el.classList.remove('timer'); clearInterval(timeId); alert('Отлично!'); >>, 1000); > > else < console.warn('stop'); clearInterval(timeId); >> window.addEventListener('scroll', handleScroll); > func();

Как остановить таймер 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() останавливать интервал.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *