JavaScript定时器暂停

JavaScript Timer Pause

本文关键字：暂停 定时器 JavaScript      更新时间：2023-12-05

代码如下。您将如何设置一个按钮来暂停计时器并在按下恢复时继续？下面的//标记是我放置暂停和恢复标记的位置。感谢您的帮助！！

<head>
<script type="text/javascript">
var d1 = new Date();
d1.setHours(1,0,0);
function f(){
var h= d1.getHours();
var m= d1.getMinutes();
var s=d1.getSeconds();
m= (m<10)?"0"+m: m;
s= (s<10)? "0"+s : s;
var el= document.getElementById("inputid");
el.value= h+":"+m+":"+s;
d1.setSeconds(d1.getSeconds()-1);
if( h==0 && m==0 && s==0 ) clearTimeout(t)
var t= setTimeout("f()",1000);
}
</script>
</head>
<body>
<form><input type="text" id="inputid"></form>
<script type="text/javascript">f()</script>
//pause and resume buttons would go here.
</body>

您可以通过clearTimeout()向其传递setTimeout或t的返回来停止超时。

现场示例：http://jsfiddle.net/tJWmH/

另一个指针：不要向setTimeout传递字符串，而是传递函数引用，所以：

var t = setTimeout(f,1000)

代替

var t = setTimeout("f()",1000);

如果你想知道为什么，搜索"eval是邪恶的"。

另一种方法是：当按下按钮时，设置一个类似paused的变量。在f函数中，如果paused为true，只需立即返回即可。

setInterval(function(){
  if (paused) return;
  // update the dom
}, 1000);

输入

<input type="button" value="Pause" onClick="window.paused=true" />

这是一个基本的小提琴

试试这个：

var d1 = new Date();
d1.setHours(1,0,0);
var t;

function f() {
    var h= d1.getHours();
    var m= d1.getMinutes();
    var s=d1.getSeconds();
    m= (m < 10) ? ('0'+m) : m;
    s= (s < 10) ? ('0'+s) : s;
    var el= document.getElementById("inputid");
    el.value = h+":"+m+":"+s;
    if( h==0 && m==0 && s==0 ) {
        clearTimeout(t)
        return;   
    }
    d1.setSeconds(d1.getSeconds()-1);
    t= setTimeout(f,1000);
}
function pause() {
    clearTimeout(t);
}
function resume() {
    t= setTimeout(f,1000);
}
resume();

你只需要调用pause（）来暂停它，再调用resume（）来恢复它。就这样！请注意，我调用resume（）一次，只是为了启动计数器。

编辑：您必须在递减前检查它是否达到零，然后返回，这样按恢复键就不会继续工作。

这不是我的代码。我发现了它并在我的项目中使用。以下是原始帖子：https://stackoverflow.com/a/3969760/1250044

Timer = function(callback, delay) {
  var timerId, start, remaining = delay;
  this.pause = function() {
    window.clearTimeout(timerId);
    remaining -= new Date() - start;
  };
  this.resume = function() {
    start = new Date();
    timerId = window.setTimeout(callback, remaining);
  };
  this.resume();
};

用途：

var t = new Timer(function(){
 /* ... */
}, 500);
t.pause();
t.resume();
相关文章：