Как вызвать setInterval (), установив и очистивInterval () при снятии флажка, используя Vanilla JS? - PullRequest
Новая
       106

Как вызвать setInterval (), установив и очистивInterval () при снятии флажка, используя Vanilla JS?

1 голос
/ 08 мая 2020

Я пытаюсь запустить setInterval (), когда флажок установлен и при снятии флажка я хочу очистить интервал с помощью clearInterval ().

Но что-то идет не так, и clearInterval () не работает. Буду рад, если кто-нибудь сможет мне помочь. 

document.getElementById('slide').addEventListener('change', function() {
    if(this.checked) {
        var auto= setInterval(function () {
            console.log('hello');
        },1000);
        
    }
    else{
        console.log("setInterval Cleared");
        var auto=clearInterval(auto);
    }
});
<div class="slide-input">
  <input type="checkbox" id="slide"> Slide
</div>

Ответы [ 2 ]

3 голосов
/ 08 мая 2020

Проблема в том, что при выполнении операции clearInterval у вас нет идентификатора сохраненного интервала, потому что переменная создается в области действия функции. Вы должны объявить его на один уровень вверху: 

var auto;
document.getElementById('slide').addEventListener('change', function() {
    if(this.checked) {
        auto = setInterval(function () {
            console.log('hello');
        },1000);

    }
    else{
        console.log("setInterval Cleared");
        auto = clearInterval(auto);
    }
});
2 голосов
/ 08 мая 2020

Это способ go: 

var auto = null;
document.getElementById('slide').addEventListener('change', function() {
    
    if(this.checked) {
        auto=setInterval(function () {
            console.log('hello');
        },1000);
    }
    else{
        console.log("setInterval Cleared");
        clearInterval(auto);
    }
});
<div class="slide-input">
  <input type="checkbox" id="slide"> Slide
</div>

Вы должны объявить var auto вне области действия прослушивателя событий, чтобы функция clearInterval знала, какой интервал необходимо очистить

...