Как остановить setInterval

clearinterval javascript или "как остановить setInterval". С примерами, остановка "setInterval" по нажатию на кнопку.

Подробно о том, как остановить setInterval

1. Метод clearInterval
2. Как остановить setInterval

Метод clearInterval

В самом начале дадим определение, "что такое clearInterval":

clearInterval - метод, который отменяет многократные повторения действий, установленные вызовом функции setInterval().

Синтаксис clearInterval

clearInterval(intervalID)

Пример использования clearInterval

Для того, чтобы продемонстрировать действие метода "clearInterval" нужно совершить пару манипуляций:

setInterval через 3 секунды

Остановить setInterval javascript

Для того, чтобы остановить setInterval - нажмите кнопку "Остановить setInterval".

Остановить setInterval



Как остановить setInterval

Нам нужно разобраться в том, как остановить "setInterval".

Нам понадобится:

Тот код, который мы ранее разобрали здесь, нам тоже понадобится! Его не будем разбирать, а просто повторим его. Это запуск setinterval:

HTML : <button onclick="goSetInterval();" class="width_100">setInterval через 3 секунды</button>
JAVASCRIPT : <script>
let example_var;
function goSetInterval() {
  example_var = setInterval("alert('Выполнен setInterval 3 сек.')", 3000);
}
</script>


Далее перейдем к тому, как остановить выполнение повторных действий, код который выше , нам потребуется другая кнопка, которая остановит "setInterval", кнопка будет состоять (опять) из button + onclick, но внутри будет уже другая функция "stopSetInterval"-

<button onclick="stopSetInterval();" class="width_100">Остановить setInterval</button>

Создадим функцию, которая и будет останавливать setInterval:

function stopSetInterval()

Внутри помещаем функцию "clearInterval", которая и выполнит нашу задачу.

clearInterval(example_var);

Теперь соединим весь код остановки setInterval:

HTML :

<button onclick="goSetInterval();" class="width_100">setInterval через 3 секунды</button>

<button onclick="stopSetInterval();" class="width_100">Остановить setInterval</button>

JAVASCRIPT :

<script>

let example_var;

function goSetInterval() {

example_var= setInterval("alert('Выполнен setInterval 3 сек.')", 3000);

}

function stopSetInterval() {

clearInterval(example_var);

}

</script>