Когда впервые запускаешь setInterval(), то спустя несколько вызовов функции-обработчика начинаешь замечать, что setInterval() не остановится самостоятельно. Он так и будет долбить вызовы без остановки. Что делать?
Прежде чем погружаться в готовое решение нужно задать себе два вопроса:
- От имени какого объекта контекста вызывается setInterval() ? То есть кто является this для вызванного нами setInterval() ?
- Как получить доступ к setInterval() ?
Официальный стандарт HTML имеет специальный раздел, который называется «Таймеры» («Timers«). В этом разделе много полезной информации. Почитайте!
Информация
Прежде чем вызывать setInterval(), нужно сначала подготовить для него переменную. От логики работы программы будет зависеть то, где должна быть видна эта переменная. То есть мы сначала ОБЪЯВЛЯЕМ где-нибудь пустую переменную (чистый идентификатор привязки), и только потом в нужном месте программы ПРИСВАИВАЕМ для этой переменной результат вызова setInterval(). Почему это ВАЖНО?
Как только setInterval() будет вызван, то с этого момента он будет зарегистрирован в «Карте Активных Таймеров» браузера. С этого момента начнутся бесконечные вызовы. Прямого доступа к «Карте Активных Таймеров» через браузер НЕТ! То есть … увидеть все зарегистрированные таймеры не получится. Поэтому, когда вызывается наш setInterval(), то его вызов возвращает нам ЧИСЛОВОЙ ИДЕНТИФИКАТОР (номер в «Карте Активных Таймеров). Наша задача сохранить этот ЧИСЛОВОЙ ИДЕНТИФИКАТОР, для того, чтобы потом иметь возможность ОЧИСТИТЬ (ОСТАНОВИТЬ) наш периодический setInterval().
Видео инструкция по остановке setInterval в JavaScript
Пример
Создаём идентификатор привязки в нашей программе при помощи JavaScript:
let my_set_interval_id
Теперь присваиваем этому идентификатору привязки значение вызова нужного нам setInterval()
my_set_interval_id = setInterval(console.log, 5000, "ТикТак")
С этого момента, мы присвоим для нашей переменной my_set_interval_id уникальное значение идентификатора таймера из «Карты Активных Таймеров». Функция-обработчик будет каждые 5 секунд выводить в консоль строку «ТикТак». Всё примитивно и просто.
Обратите внимание!!! В нашем конкретном случае вызов setInterval() вернул число 399. Это число уникальное внутри «Карты Активных Таймеров». Только по этому числу можно будет остановить наш setInterval(). Это и есть наш идентификатор таймера.
Решение
Теперь, когда мы знаем точный идентификатор нашего интервального таймера, то мы можем остановить наш setInterval() при помощи метода clearInterval().
Этот метод очистки интервала ожидает получить в качестве аргумента уникальный идентификатор таймера из «Карты Активных Таймеров». Мы его уже знаем, потому что заранее подготовились.
В нужном месте программы разместим выражение:
clearInterval(399)
В clearInterval() мы передали число 399.
С этого момент наш интервальный таймер прекратит свою работу и остановит периодические вызовы функции-обработчика. С этого момент мы перестанем видеть в консоли выпадающие строки «ТикТак».
В нашем случае до остановки setInterval(), прошло 84 вызова функции обработчика.
Важно
Если бы мы никуда не сохранили возвращённый идентификатор нашего интервального таймера, то мы бы не смогли никогда его остановить. (Во всяком случае пока был бы жив ГЛОБАЛЬНЫЙ объект).
Также важен тот момент, что функция setInterval() НЕ ГАРАНТИРУЕТ точной работы вызовов по расписанию. По факту всегда будут дополнительные задержки. Но это тема отдельной публикации.
Информационные ссылки
Стандарт HTML — Раздел «Timers» — https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers
