如何暂停setInterval（）函数？

Question

如何使用Java脚本暂停和恢复setInterval（）函数？

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

那我该怎么做呢？

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。

注意：此系统很简单，并且对于不需要高精确度的应用程序非常有效，但是它不会考虑两次滴答之间的时间间隔：如果您在半秒钟后单击暂停，然后单击播放您的时间将关闭半秒钟。