javascript - 如何暂停 setInterval() 函数？

Question

如何使用 Javascript 暂停和恢复 setInterval() 函数？

例如，也许我有一个秒表可以告诉您您浏览网页的秒数。有一个“暂停”和“恢复”按钮。 clearInterval() 在这里不起作用的原因是因为如果用户在第 40 秒和第 800 毫秒点击“暂停”按钮，当他点击“恢复”按钮时，经过的秒数必须在 200 毫秒后增加 1。如果我在计时器变量上使用 clearInterval() 函数(单击暂停按钮时)，然后再次在计时器变量上使用 setInterval() 函数(当单击恢复按钮时)，经过的秒数将增加1 仅在 1000 毫秒后，这会破坏秒表的准确性。

那我该怎么做呢？

Answer 1

您可以使用标志来跟踪状态:

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。

注意:该系统很简单，适用于不需要高精度的应用程序，但它不会考虑滴答之间耗时:如果您在半秒后单击暂停，然后单击播放你的时间将关闭半秒。