clearInterval（）不起作用，不返回错误

雷扎·萨达蒂（Reza Saadati）

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

这是我尝试的方法：

$('#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')在单击复选框而不是开头时运行该函数。

苏伦·斯拉皮扬（Suren Srapyan）

单击后，它将调用并将调用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);
      }
   });

})();