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

})();