logo标签列表

JavaScript计时器暂停

javascripttimer
3
以下是代码。如何设置按钮以暂停计时器，并在按下“恢复”时恢复？下面的//标记是我放置暂停和恢复标记的地方。感谢您的所有帮助！
<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>
4个回答
1

你可以使用clearTimeout()来停止超时，将其传递给setTimeout的返回值或者在你的情况下传递t。

实例演示：http://jsfiddle.net/tJWmH/

另一个提示：不要将字符串传递给setTimeout，而是传递一个函数引用，所以：

var t = setTimeout(f,1000)

取而代之

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

如果你想知道原因，搜索"eval是邪恶的"。

1
另一种方法是：当按钮被按下时，设置一个名为 paused 的变量。在您的 f 函数中，如果 paused 为真，则立即返回。
setInterval(function(){
  if (paused) return;
  // update the dom
}, 1000);

输入

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

这里是一个基本的fiddle

1
恢复按钮设置 paused=false。 - hvgotcodes
你可能需要将这个改成setInterval，否则如果你暂停的话，函数将不会被重新调度。 - Jamiec
不，setTimeout也可以，只有当计数器达到零时才会清除超时（还需要有一个else分支）。所以没问题。请看我对你的问题的回答！ - Angel
1
这不是我的代码。我找到它并在我的项目中使用。这是原始帖子：https://dev59.com/vW865IYBdhLWcg3wIa_M#3969760 
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();
1
尝试一下这个：
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()，只是为了启动计数器。
编辑：在递减之前，你必须检查是否达到了零，并返回，以防止按下resume继续工作。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接