Javascript 计时器 : resume button

Question

如何向这个 javascript 倒数计时器添加恢复按钮？

JS

$(document).ready(function () {
var $worked = $("#timer");

function update() {
    var myTime = $worked.html();
    var ss = myTime.split(":");
    var dt = new Date();
    dt.setHours(ss[0]);
    dt.setMinutes(ss[1]);
    dt.setSeconds(ss[2]);

    var dt2 = new Date(dt.valueOf() - 1000);
    var temp = dt2.toTimeString().split(" ");
    var ts = temp[0].split(":");

    $worked.html(ts[0]+":"+ts[1]+":"+ts[2]);
    z = setTimeout(update, 1000);          
} 
setTimeout(update, 1000); 
});       

HTML

<div id="timer">00:00:00</div>
<input type="button" onclick="clearTimeout(z)" value="pause">

https://jsfiddle.net/k9o6dj11/

Answer 1

使用间隔和变量来定义是否暂停，而不是超时。如果点击了 pause 按钮，update() 函数将继续执行，但不会做任何事情。

https://jsfiddle.net/k9o6dj11/2/

var paused = false;

function update() {
    if (paused) return;
    ...                  
} 

setInterval(update, 1000); 

$('.pause').on('click', function () {
    paused = true;
});

$('.resume').on('click', function () {
    paused = false;
});