clearInterval() 在按钮单击时不起作用答案

【问题标题】：clearInterval() not working on button clickclearInterval() 在按钮单击时不起作用
【发布时间】：2015-04-22 04:24:41
【问题描述】：

我有一个带有两个按钮的 HTML 页面，我想在单击开始按钮时使用 setInterval 多次评估该函数。这工作得很好，但我无法清除间隔。我做错了什么？

function intFunc (func, time) {
     interval = setInterval(func, time);
}

$("#startButton").on("click", intFunc(function () {
        $.post('link/to/php.php', function(data) {
                 //do something with data
        });
}, 1000));

$("#stopButton").on("click", function () {
         clearInterval(interval);
});

【问题讨论】：

clearInterval() 函数的代码在哪里，还是内置函数？
这是一个内置函数w3schools.com/jsref/met_win_clearinterval.asp
可能是范围问题。在您的点击功能中尝试console.log(interval) 以检查是否已通过间隔。
另外，你的on("click, 应该是on("click",
哎呀，只是一个错字，我不得不手动编写代码

标签： javascript jquery setinterval clearinterval

【解决方案1】：

首先，正如 cmets 建议的那样，您应该在上面声明 interval 以确保范围明确。

其次，你有语法问题。您正在立即调用intFunc，并将结果传递给$("#startButton").on()。这不是你想要的。您应该作为第二个参数传递的是回调函数。你可以像这样重新组织你的代码：

第三，在自调用匿名函数中声明将防止对全局范围的污染。

(function() {
    var interval;

    $("#startButton").on("click", function(){
        interval = setInterval(function () {
            $.post('link/to/php.php', function(data) {
               //do something with data
            });
        }, 1000);
    });

    $("#stopButton").on("click", function () {
        clearInterval(interval);
    });
})();

【讨论】：

我认为你应该做一个明确的例子来说明如何停止间隔而不是这个。
@AndrewLavers，菜鸟问题，但说var interval;你的意思是var interval;在全球范围内？
@AlexanderSolonik 谁说它是全球性的？你真的应该在全球范围内尽可能少地做。使用闭包，它本质上只是将你的代码包装在一个函数中，比如(function(){ /* ... code lives here in its own scope ... */ })().!这样你就可以隔离你的代码，你可以用它做很多事情，但这不适合评论:-)
@EJTH，谢谢 alooot :) 我正在学习 IIFE，我必须说它们很强大。
@EJTH 是正确的，应尽可能避免使用全局范围。我将编辑答案以将其合并并停止间隔。

【解决方案2】：

这是你应该（或可能）这样写的：

var interval;
$("#startButton").on("click", function(){
      interval = setInterval(function () {
         $.post('link/to/php.php', function(data) {
               //do something with data
         });
      }, 1000);
});

$("#stopButton").on("click", function () {
         clearInterval(interval);
});

你不能使用这样的函数，因为当你写的时候：

$("#startButton").on("click", intFunc(..));

您正在立即执行 intFunc，并且不会返回任何内容。

【讨论】：