[英]How to start and stop/pause setInterval?
我正在尝试暂停然后播放setInterval
循环。
在我停止循环后,我尝试中的“开始”按钮似乎不起作用:
input = document.getElementById("input"); function start() { add = setInterval("input.value++", 1000); } start();
<input type="number" id="input" /> <input type="button" onclick="clearInterval(add)" value="stop" /> <input type="button" onclick="start()" value="start" />
有没有可行的方法来做到这一点?
请参阅 jsFiddle 上的工作演示:http: //jsfiddle.net/qHL8Z/3/
$(function() { var timer = null, interval = 1000, value = 0; $("#start").click(function() { if (timer !== null) return; timer = setInterval(function() { $("#input").val(++value); }, interval); }); $("#stop").click(function() { clearInterval(timer); timer = null }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" id="input" /> <input id="stop" type="button" value="stop" /> <input id="start" type="button" value="start" />
JSFiddle 将您的代码包装在一个函数中,因此start()
没有在全局范围内定义。
故事的寓意:不要使用内联事件绑定。 使用addEventListener
/ attachEvent
。
请不要将字符串传递给setTimeout
和setInterval
。 这是变相的eval
。
改用一个函数,并使用var
和空格来获得舒适:
var input = document.getElementById("input"), add; function start() { add = setInterval(function() { input.value++; }, 1000); } start();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" id="input" /> <input type="button" onclick="clearInterval(add)" value="stop" /> <input type="button" onclick="start()" value="start" />
正如您已标记此 jQuery ...
首先,将 ID 放在输入按钮上并删除内联处理程序:
<input type="number" id="input" />
<input type="button" id="stop" value="stop"/>
<input type="button" id="start" value="start"/>
然后将所有状态和函数封装在一个闭包中:
EDIT更新了一个更清洁的实现,这也解决了@Esailija 对使用setInterval()
的担忧。
$(function() {
var timer = null;
var input = document.getElementById('input');
function tick() {
++input.value;
start(); // restart the timer
};
function start() { // use a one-off timer
timer = setTimeout(tick, 1000);
};
function stop() {
clearTimeout(timer);
};
$('#start').bind("click", start); // use .on in jQuery 1.7+
$('#stop').bind("click", stop);
start(); // if you want it to auto-start
});
这可以确保您的任何变量都不会泄漏到全局范围内,并且不能从外部修改。
add 是局部变量而不是全局变量试试这个
var add; var input = document.getElementById("input"); function start() { add = setInterval("input.value++", 1000); } start();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" id="input" /> <input type="button" onclick="clearInterval(add)" value="stop" /> <input type="button" onclick="start()" value="start" />
(function(){
var i = 0;
function stop(){
clearTimeout(i);
}
function start(){
i = setTimeout( timed, 1000 );
}
function timed(){
document.getElementById("input").value++;
start();
}
window.stop = stop;
window.start = 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
停止计时器:
MyFirstTimerObject.StopTimer(); //Stop First Timer
MySecondTimerObject.StopTimer(); //Stop Second Timer
再次从 0ms 重新启动计时器:
MyFirstTimerObject.StartTheTimer(); //Start or restart the First timer
MySecondTimerObject.StartTheTimer(); //Start or restart the Second timer
<!DOCTYPE html> <html> <body> <input type="button" onclick="mySetIntervalOff()" value="stop" /> <input type="button" onclick="startInicio()" value="start" /> <p id="demo"></p> <script> var mySetInterval; function startInicio() { mySetInterval = setInterval(function() { const date = new Date(); document.getElementById("demo").innerHTML = date.toLocaleTimeString(); }, 1000); } startInicio(); clearInterval(mySetInterval); function mySetIntervalOff() { clearInterval(mySetInterval); } </script> </body> </html>
您不能在执行过程中停止计时器功能。 您只能在它完成后捕获它并防止它再次触发。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.