Javascript 如何启动和停止/暂停设置间隔？

我试图暂停，然后播放

setInterval

循环

停止循环后，中的“开始”按钮似乎不起作用：

input=document.getElementById（“输入”）；
函数start（）{
add=setInterval（“input.value++”，1000）；
}
start（）

您不能在执行中停止计时器功能。您只能在它完成后捕获它并防止它再次触发。
add是一个局部变量而不是全局变量请尝试此操作


var-add；
var输入=document.getElementById（“输入”）；
函数start（）{
add=setInterval（“input.value++”，1000）；
}
start（）

您看到此特定问题的原因：
jsiddle将代码包装在函数中，因此在全局范围中未定义
start（）



故事的寓意：不要使用内联事件绑定。使用/
attachEvent


其他说明：
请不要将字符串传递给
setTimeout
和
setInterval
。它是伪装的
eval

改用函数，轻松使用
var
和空白：


var input=document.getElementById（“输入”），
添加
函数start（）{
add=setInterval（函数（）{
输入.value++；
}, 1000);
}
start（）
请参阅JSFIDLE上的工作演示：


$（函数（）{
var timer=null，
间隔=1000，
数值=0；
$（“#开始”）。单击（函数（）{
if（timer！==null）返回；
计时器=设置间隔（函数（）{
$（“#输入”）.val（++值）；
}，间隔）；
});
$（“#停止”）。单击（函数（）{
清除间隔（计时器）；
计时器=空
});
});


当您标记此jQuery时

首先，在输入按钮上放置ID并删除内联处理程序：

<input type="number" id="input" />
<input type="button" id="stop" value="stop"/>
<input type="button" id="start" value="start"/>

这确保了没有任何变量泄漏到全局范围，并且不能从外部修改

（更新）在
的工作演示中，我以这种方式使用多个计时器。这不是一个优雅的解决方案，但效果很好

var timerclass = function () {
    this.initialTime = Date.now();
    var t=this;
    var Timer = setInterval(function(){t.checkTime();}, 1000); //start the timer (goes to function checkTime every 1000ms )
    this.timerstart=false;      
}; //end of constructor

timerclass.prototype.StartTheTimer = function(){    
    this.initialTime = Date.now(); //Time right now
    this.timerstart=true;
};      
    
timerclass.prototype.checkTime= function(){ 
    if(this.timerstart==true)
    {
        var timeDifference = Date.now() - this.initialTime; 
        console.log("Time ms: "+timeDifference);        
   }
};  
    
timerclass.prototype.StopTimer= function(){
    this.timerstart=false;
};      
    
module.exports = timerclass;

然后在主代码中：

var MyTimerSystem = require(__dirname+'/class.timerclass.js');
var MyFirstTimerObject = new MyTimerSystem(); //First Timer 
var MySecondTimerObject = new MyTimerSystem(); //Second Timer

停止计时器：

再次从0毫秒重新启动计时器：

MyFirstTimerObject.StartTheTimer();  //Start or restart the First timer
MySecondTimerObject.StartTheTimer(); //Start or restart the Second timer

@网页设计师-这是因为小提琴，而不是因为他的代码。见马特·鲍尔的答案。相同的代码，但现在可以工作了-谢谢@mrtsherman如果我能接受你的评论，我会接受你的。这就是我将使用的方法。@Web\U Designer它仍然使用字符串而不是
setInterval（）
@Web\U Designer-Alnitak中的函数。你应该用马特·鲍尔的答案，而不是这个。我只是向投票人指出，爵士乐人不配。你们能为@MΓΓБББLL的答案提供一个演示吗？谢谢美好的我不明白为什么他的小提琴不正常。很高兴知道+1yup-JSFIDLE非常简洁，但您必须了解它与普通脚本文件的工作方式有何不同。@Web_Designer只需使用中的代码，假设您实际使用的是jQuery（正如您的问题被标记的那样）。鉴于此问题被标记为
jQuery
（我错过了），这是最好的解决方案。仅供参考，这里的反对票是因为某些人不同意我在其他地方的一些观点，而不是因为答案有任何问题。可能需要稍微调整一下这一点：。对不起，我的选票太差了。这不是投票的工作方式。因为将函数放入全局范围并从内联事件处理程序调用它们都是不好的做法。我反对投票的原因与Alnitak引用的原因相同。@Alnitak确定，但setInterval是有史以来最差的做法之一。我不是在贬低别人，因为他们不这么认为。我只是在尽可能接近OP的代码，删除最坏的违规者。@Esailija IMHO为此
setInterval（）
是完全可以接受的。计时器事件因未得到服务而排队的风险可以忽略不计。@Alnitak，没错，因为这是setInterval唯一不好的地方。唉。如果元素被删除，setInterval将继续导致错误，除非您执行一些冗余的防御代码。唉，谢谢@mrtsherman！使用你的方法：如果你要使用它，请至少按照MΓΓΓББLL的答案显示的方式来固定你的计时器。
var MyTimerSystem = require(__dirname+'/class.timerclass.js');
var MyFirstTimerObject = new MyTimerSystem(); //First Timer 
var MySecondTimerObject = new MyTimerSystem(); //Second Timer

MyFirstTimerObject.StopTimer(); //Stop First Timer
MySecondTimerObject.StopTimer(); //Stop Second Timer

MyFirstTimerObject.StartTheTimer();  //Start or restart the First timer
MySecondTimerObject.StartTheTimer(); //Start or restart the Second timer