如何暫停和恢復JavaScript計時器

我有這個計時器，它工作正常，但我需要能夠暫停並繼續之後。如果有人能幫助我，我將不勝感激。如何暫停和恢復JavaScript計時器

<html> 
<head> 
<script> 
function startTimer(m,s) 
    { 
     document.getElementById('timer').innerHTML= m+":"+s; 
     if (s==0) 
      { 
       if (m == 0) 
       { 
        return; 
       } 
       else if (m != 0) 
       { 
        m = m-1; 
        s = 60; 
       } 
     } 
    s = s-1; 
    t=setTimeout(function(){startTimer(m,s)},1000); 
} 


</script> 
</head> 

<body> 
<button onClick = "startTimer(5,0)">Start</button> 

<p id = "timer">00:00</p> 
</body> 
</html>

來源

2013-04-21 user2303981

如果你不_DATE_對象時，你需要讓你的計時器運行得更快，保持計數變量最新的使當調用clearTimeout時，您可以更準確地反映您恢復時的位置。如果您使用的是日期對象，請記錄暫停時間並恢復時間，並且您可以計算差異並適應它。 – 2013-04-21 19:07:39

我簡直無法忍受看到setTimeout(...,1000)，並期待它恰好是1000毫秒。快訊：不是。事實上，取決於你的系統，它可能在992到1008之間的任何地方，而這個差別會加起來。

我將向您展示一個可計時的計時器以確保準確性。如果您在計算機中間改變計算機的時鐘，那麼唯一的辦法就是不準確。

function startTimer(seconds, container, oncomplete) { 
    var startTime, timer, obj, ms = seconds*1000, 
     display = document.getElementById(container); 
    obj = {}; 
    obj.resume = function() { 
     startTime = new Date().getTime(); 
     timer = setInterval(obj.step,250); // adjust this number to affect granularity 
          // lower numbers are more accurate, but more CPU-expensive 
    }; 
    obj.pause = function() { 
     ms = obj.step(); 
     clearInterval(timer); 
    }; 
    obj.step = function() { 
     var now = Math.max(0,ms-(new Date().getTime()-startTime)), 
      m = Math.floor(now/60000), s = Math.floor(now/1000)%60; 
     s = (s < 10 ? "0" : "")+s; 
     display.innerHTML = m+":"+s; 
     if(now == 0) { 
      clearInterval(timer); 
      obj.resume = function() {}; 
      if(oncomplete) oncomplete(); 
     } 
     return now; 
    }; 
    obj.resume(); 
    return obj; 
}

，並以此來啓動/暫停/恢復：

// start: 
var timer = startTimer(5*60, "timer", function() {alert("Done!");}); 
// pause: 
timer.pause(); 
// resume: 
timer.resume();

來源

2013-04-21 19:08:14

我怎麼可以添加一個復位功能，重新啓動計時器從頭再來？ – 2016-09-08 16:55:26

@LukasBaliūnas變量'ms'記錄剩餘的毫秒數。您可以在'startTimer'函數中添加'obj.reset = function（）{ms = seconds * 1000;}'，並調用'timer.reset（）'來實現重置。但是請注意，如果定時器已經完成，那麼'.resume（）'不會執行任何操作 - 您可能需要刪除'obj.resume = function（）{}'行以允許它在第二次運行後重置。 – 2016-09-08 19:42:18

另一個，我將如何添加一個函數來添加秒或減少秒計時器？將在計時器運行或暫停時執行。謝謝 – 2016-09-12 10:27:58

<p id="timer">00:00</p> 
<button id="start">Start</button> 
<button id="pause">Pause</button> 
<button id="resume">Resume</button> 

var timer = document.getElementById("timer"); 
var start = document.getElementById("start"); 
var pause = document.getElementById("pause"); 
var resume = document.getElementById("resume"); 
var id; 
var value = "00:00"; 

function startTimer(m, s) { 
    timer.textContent = m + ":" + s; 
    if (s == 0) { 
     if (m == 0) { 
      return; 
     } else if (m != 0) { 
      m = m - 1; 
      s = 60; 
     } 
    } 

    s = s - 1; 
    id = setTimeout(function() { 
     startTimer(m, s) 
    }, 1000); 
} 

function pauseTimer() { 
    value = timer.textContent; 
    clearTimeout(id); 
} 

function resumeTimer() { 
    var t = value.split(":"); 

    startTimer(parseInt(t[0], 10), parseInt(t[1], 10)); 
} 

start.addEventListener("click", function() { 
    startTimer(5, 0); 
}, false); 

pause.addEventListener("click", pauseTimer, false); 

resume.addEventListener("click", resumeTimer, false);

上jsfiddle

還有的是可以作出改進整個負載，但我堅持用OP發佈的用於OP的理解的代碼。

這裏是一個擴展版本，讓您進一步的想法上jsfiddle

來源

2013-04-21 19:17:03 Xotic750

如何暫停和恢復JavaScript計時器

回答

相關問題