setInterval 和 clearInterval 的正确方法答案

【问题标题】：Proper way to setInterval and clearIntervalsetInterval 和 clearInterval 的正确方法
【发布时间】：2017-06-15 02:21:23
【问题描述】：

相对 JS 的新手，试图围绕日程安排。此代码将启动附加但不会停止它。我很确定问题在于“clearInterval”需要处理一个分配了“setInterval”函数的变量。我似乎无法理解的是如何正确表达。

var hmm = function appendStuff(){
    $("p").append("<b>Appended text</b>");
};
$("#start").click(function() {   
    console.log("startClicked");  // working... 
    window.setInterval(hmm, 1000) // working...
}); 
$("#stop").click(function() {   
    console.log("stopClicked");  // working...  
    window.clearInterval(hmm)
});

谢谢！

【问题讨论】：

基于w3schools.com/jsref/met_win_clearinterval.asp 看起来您需要将clearInterval 应用于setInterval 的返回值，而不是您设置的间隔函数

标签： javascript setinterval clearinterval

【解决方案1】：

setInterval() 函数返回一个 ID。这是您要分配给 hmm 的内容。

另外，setInterval()的第一个参数是你要在每个区间调用的函数。

var hmm = null;
function appendStuff(){
    $("p").append("<b>Appended text</b>");
};
$("#start").click(function() {   
    console.log("startClicked");  // working... 
    hmm = window.setInterval(appendStuff, 1000) // working...
}); 
$("#stop").click(function() {   
    console.log("stopClicked");  // working...  
    window.clearInterval(hmm)
});

【讨论】：

“另外，setInterval() 的第一个参数是你想在每个间隔调用的函数。” - 是的，这就是 OP 的代码已经做的。
我知道。但由于我们已经改变了 hmm 的值，我只是澄清一下，它不应该是 hmm 了。

【解决方案2】：

你需要将setInterval对象赋值给一个变量，然后传递给clearInterval，而不是SetInterval的函数变量传递给clearInterval。参考here。

var hmm = function appendStuff(){
    $("p").append("<b>Appended text</b>");
};
var interval;
$("#start").click(function() {   
    console.log("startClicked");  // working... 
    interval = window.setInterval(hmm, 1000) // working...
}); 
$("#stop").click(function() {   
    console.log("stopClicked");  // working...  
    window.clearInterval(interval)
});

【讨论】：

【解决方案3】：

您可以使用 w3School here 中的这个 setInterval() 示例。基本上你使用的语法例如：

var yourIntervalVariable = setInterval(function(){
  // do something here..
}, 1000);

然后你可以像这样在变量上使用 clearInterval()：

clearInterval(yourIntervalVariable);

【讨论】：