clearInterval() 不起作用，不返回任何错误

Question

我想在选中复选框时运行一个函数，并在未选中复选框时停止该函数。

这是我尝试的方式：

$('#auto').on('click', function() {
    if ($(this).is(':checked')) {
        // Interval
        var autoInterval = window.setInterval(function() {
            navi('next');
        }, 1500);
    }
    else {
        clearInterval(autoInterval);
    }
});

问题是clearInterval()不起作用，我没有收到任何错误。

https://jsfiddle.net/n339tzff/9/

如果我的代码如下所示，它将起作用：

// Interval
var autoInterval = window.setInterval(function() {
    navi('next');
}, 1500);
// Auto Play
$('#auto').on('click', function() {
    if ($(this).is(':checked')) {
        autoInterval;
    }
    else {
        clearInterval(autoInterval);
    }
});

但是我还有另一个问题...我只想在单击复选框时navi('next')运行该功能，而不是在开始时运行该功能。

Answer 1

单击时，它会调用setInterval并将调用结果存储在autoInterval中，并在函数结束后将其删除。因此，您每次在同一调用中存储并丢失变量的value。

在事件处理程序之外声明 autoInterval 变量，使其独立于事件处理程序的作用域。你也可以用 IIFE 包装你的函数，以免在外面改变这个变量

(function() { 
   var autoInterval;
   $('#auto').on('click', function() {
      if ($(this).is(':checked')) {
         autoInterval = window.setInterval(function() {
           navi('next');
         }, 1500);
      } else {
         clearInterval(autoInterval);
      }
   });
})();

Answer 2

您应该在

事件处理程序函数之外定义 autoInterval，因为在事件运行后，此变量将被"丢弃"/无法访问。

var autoInterval = null;
$('#auto').on('click', function () {
    if ($(this).is(':checked')) {
        autoInterval = window.setInterval(function () {
            navi('next');
        }, 1500);
    }
    else if(autoInterval !== null) {
        clearInterval(autoInterval);
        autoInterval = null;
    }
});