如何使用 Vanilla JS 通过检查和取消选中复选框时的 clearInterval() 来触发 setInterval()？

Question

我正在尝试启动 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>

Answer 1

问题是，当您执行 clearInterval 时，您没有保存间隔的 ID，因为变量是在函数作用域中创建的。您应该将其声明为顶级：

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);
    }
});

Answer 2

这是一条路：

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 函数知道需要清除哪个间隔

如何使用 Vanilla JS 通过检查和取消选中复选框时的 clearInterval() 来触发 setInterval()？

How to Trigger setInterval() by checking and clearInterval() on unchecking a Checkbox, using Vanilla JS?

html

javascript

setinterval

clearinterval