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

clearInterval（）不起作用并且不返回任何错误

2 个答案: