如何暂停setInterval（）函数？

Z时代
2024-01-10
分类：问答

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

例如，也许我有一个秒表来告诉您您浏览网页的秒数。有一个“暂停”和“恢复”按钮。

的原因是，如果用户在第40秒和第800毫秒单击“暂停”按钮，则当他单击“恢复”按钮时，经过的秒数必须在之后增加1

200毫秒。如果我在计时器变量上使用clearInterval（）函数（单击暂停按钮时），然后在计时器变量上再次使用setInterval（）函数（单击恢复按钮时），经过的秒数将增加仅在1000毫秒后返回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>