如何暂停setInterval()函数？
如何使用Javascript暂停并恢复setInterval()函数？
例如，也许我有一个秒表告诉你，你一直在看网页的秒数。有一个“暂停”和“简历”按钮。clearInterval()不能在这里工作的原因是，如果用户在第40秒和800毫秒处单击“暂停”按钮，当他单击“简历”按钮时，经过的秒数必须在200毫秒后增加1。如果我在计时器变量上使用clearInterval()函数(当单击暂停按钮时)，然后再次对计时器变量使用setInterval()函数(当单击恢复按钮时)，经过的秒数在1000毫秒后才会增加1，这就破坏了秒表的准确性。
那我该怎么做？
回答 8
Stack Overflow用户
发布于 2014-01-22 08:42:28
您可以使用一个标志来跟踪状态：
var output = $('h1');
var isPaused = false;
var time = 0;
var t = window.setInterval(function() {
if(!isPaused) {
time++;
output.text("Seconds: " + time);
}
}, 1000);
//with jquery
$('.pause').on('click', function(e) {
e.preventDefault();
isPaused = true;
});
$('.play').on('click', function(e) {
e.preventDefault();
isPaused = false;
});h1 {
font-family: Helvetica, Verdana, sans-serif;
font-size: 12px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Seconds: 0</h1>
<button class="play">Play</button>
<button class="pause">Pause</button>
这正是我要做的，我不确定你是否真的可以暂停setInterval。
注意:这个系统很简单，对于不需要很高精度的应用程序也很好，但是它不会考虑在滴答之间经过的时间:如果您在半秒钟后单击“暂停”，然后单击“播放”，那么您的时间将缩短半秒。
Stack Overflow用户
发布于 2014-01-22 08:45:33
你不应该用区间函数来测量时间。相反，只需在计时器启动时节省时间，并在计时器停止/暂停时测量差异。仅使用setInterval更新显示的值。因此，没有必要暂停计时器，您将获得最佳的准确性，以这种方式。
Stack Overflow用户
发布于 2017-03-30 23:19:58
@Jonas Giuro说得对：
不能暂停setInterval函数，可以停止它(clearInterval)，或者让它运行
另一方面，这种行为可以用suggested @VitaliyG建议来模拟。
你不应该用区间函数来测量时间。相反，只需在计时器启动时节省时间，并在计时器停止/暂停时测量差异。仅使用setInterval更新显示的值。
var output = $('h1');
var isPaused = false;
var time = new Date();
var offset = 0;
var t = window.setInterval(function() {
if(!isPaused) {
var milisec = offset + (new Date()).getTime() - time.getTime();
output.text(parseInt(milisec / 1000) + "s " + (milisec % 1000));
}
}, 10);
//with jquery
$('.toggle').on('click', function(e) {
e.preventDefault();
isPaused = !isPaused;
if (isPaused) {
offset += (new Date()).getTime() - time.getTime();
} else {
time = new Date();
}
});h1 {
font-family: Helvetica, Verdana, sans-serif;
font-size: 12px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Seconds: 0</h1>
<button class="toggle">Toggle</button>
https://stackoverflow.com/questions/21277900
复制相似问题
腾讯云开发者
