Остановка таймера 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() в JavaScript/jQuery?
Чтобы остановить setInterval() вам нужно использовать пример ниже.
В JavaScript есть функция, которая называется clearInterval(), которая была создана специально для того, чтобы останавливать интервалы. Пример ниже демонстрирует то, как можно остановить интервал, который длиться каждые десять секунд.
var newInterval = setInterval(function() < clearInterval(newInterval); >, 10000);
JavaScript | Как остановить setInterval() через 10 вызовов функции обратного вызова?
В JavaScript кусочки кода оборачиваются в функции, когда нужно сохранить именованное представление определённой логики работы участка из всей программы.
В нашем случае нам нужно создать некоторый счётчик, который будет виден функцией setInterval() и функцией обратного вызова. Этот счётчик будет сам являться функцией.
Итого получаем 3 функции.
Решение задачи
Давайте сперва создадим главную функцию, которая будет хранить всю логику работы:
function call10times ()<>
Теперь у нас есть контейнер для ограниченного запуска интервального таймера. Мы назвали его call10times() . В этом контейнере будут замкнуты нужные нам переменные и функции.
Теперь создадим переменную step , которая будет хранить шаг текущего вызова интервального таймера. Ещё мы объявляем переменную id , которая будет хранить в себе идентификатор из «Карты Активных Таймеров» браузера в момент первого и единственного вызова «интервала».
function call10times ()< let step = 0; let id = 0; function stepplus()<(step < 10)?console.log(step+=1):clearInterval(id)> return 500) >
Внутри мы объявляем функцию stepplus(), которая будет увеличивать значение шага на единицу, когда его значение меньше 10. И возвращать она будет очистку интервала, когда значение шага станет 10 и более. Её тело мы оформили тернарным оператором (УСЛОВИЕ ? ДЕЙСТВИЕ ЕСЛИ ВЕРНО : ДЕЙСТВИЕ ЕСЛИ ЛОЖНО).
В таком виде функция мало полезна т. к. она просто выводит в консоль значения текущего шага вызова интервала. Давайте её сделаем более универсальной.
Улучшение № 1 — Передача нужной нам функции обратного вызова в качестве параметра в call10times()
Представим, что у нас уже есть какая-то функция с логикой работы, которую мы хотим вызывать в интервале ограниченное количество раз. Давайте её передадим.
function call10t (myfun)< let step = 0; let id = 0; function stepplus()< if (step < 10) < return step+=1, myfun() > else < return clearInterval(id)>> return 500) >
Пример вызова с передачей стрелочной функции в качестве параметра:
call10t (()=>console.log(1))
Улучшение № 2 — передача с аргументами
Если мы хотим передавать коллбэк с параметрами, то мы можем учитывать передачу этих параметров двумя способами. Всё что будет добавлено через запятую после слова myfun, будет попадать в объект arguments.
function call10ti (myfun)< let step = 0; let id = 0; let a = arguments; function stepplus()< if (step < 10) < return step+=1, myfun(. [. a].slice(1)) > else < return clearInterval(id)>> return 500) >
Пример для вызова:
call10ti (console.log, 1) call10ti (console.log, 777, 555)
Можно воспользоваться встроенной в JavaScript конструкцией через оператор spread — троеточие.
function call10tim (myfun, . args)< let step = 0; let id = 0; function stepplus()< if (step < 10) < return step+=1, myfun(. args) > else < return clearInterval(id)>> return 500) >
Пример для вызова:
call10ti (console.log, 22) call10ti (console.log, 44, 999)
Улучшение № 3 — дополнительная передача требуемого количества вызовов интервального коллбека
Можно воспользоваться встроенной в JavaScript конструкцией через оператор spread — троеточие.
function callanytimes (myfun, times, . args)< let step = 0; let id = 0; function stepplus()< if (step < times) < return step+=1, myfun(. args) > else < return clearInterval(id)>> return 100) >
Пример для вызова:
callanytimes (console.log, 3, 'TikTak') callanytimes (console.log, 12, 'TikTak') callanytimes (console.log, 12, 'TikTak', 'BomBom')
Как остановить 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) , чтобы проверить, остановит ли он таймер, — не остановил. Не могу понять, почему в данном случае он не останавливает таймер, и как сделать, чтобы заработал.