javascript - 准确的 Javascript 计时器

Question

我正在尝试构建一个准确的倒数计时器，显示剩余的分钟数和秒数。我尝试了两种方法。方法 1 使用 setTimer 函数并计算漂移。对于这种方法，一些值被跳过，一些值被重复。方法 2 会产生所有必要的值，但这些值不会以均匀的间隔打印到屏幕上(在 repl.it 中测试)。如何制作一个既准确又能打印所有值的计时器？

方法一:

function countTime(duration) {
     var expected = 1;
     var secsLeft;
     var startT = new Date().getTime();
     var oneSecond = 1000;
     var expected = startT + oneSecond;

     window.setTimeout(step, oneSecond);

     function step() {
         var nowT = new Date().getTime();
         var drift = nowT - expected;

         if (drift > oneSecond) {
             console.log("drift is over 1 second long!");
         }

         console.log('drift is ' + drift);
         var msDelta = nowT - startT;
         var secsLeft = duration - Math.floor(msDelta / 1000);
         console.log("secsLeft" + secsLeft);

         if (secsLeft === 0) {
             ++count;
             console.log("cleared");

         } else {

             expected += oneSecond;
             setTimeout(step, Math.max(0, oneSecond - drift));
         }
     }
 }
 countTime(60);

方法 2:

function countTime(duration) {
     var expected = 1;
     var secsLeft;
     var inter;
     var startT = new Date().getTime();

     inter = setInterval(function() {
         //change in seconds
         var sChange = Math.floor((new Date().getTime() - startT) / 1000);

         if (sChange === expected) {
             expected++;
             secsLeft = duration - sChange;
             console.log("seconds Left" + secsLeft);
         }

         if (secsLeft === 0) {
             window.clearInterval(inter);
             console.log("cleared");
         }
     }, 100);
 }
 countTime(60);

Answer 1

考虑使用requestAnimationFrame。

function countTime(duration) {
    requestAnimationFrame(function(starttime) {
        var last = null;
        function frame(delta) {
            var timeleft = Math.floor(duration - (delta - starttime)/1000),
                minutes = Math.floor(timeleft/60),
                seconds = timeleft%60;
            if( timeleft > 0) {
                if( last != timeleft) {
                    console.log("Time left: "+minutes+"m "+seconds+"s");
                    last = timeleft;
                }
                requestAnimationFrame(frame);
            }
        }
        frame(starttime);
    });
}
countTime(60);

这将精确到浏览器本身的帧速率内:)