setTimeout倒计时误差？如何减少

本例实现了倒数10秒的功能，我们在使用setTimeout的时候如果要一个函数每每隔1秒执行一次就会这样写

setTimeout(animate, 1000);
但是这样会忽略animate方法本身的运行时间，所以我们可以在执行animate方法的时候计算这个方法主要的语句的执行时间，之后在setTimeout中减去那个由于运行语句而耽搁的时间，从而实现更加精确的计时:

setTimeout写法:

var count = 10;
var timer = null;
function animate() {
  var start = Date.now();
  count--;
  var finish = Date.now();
  if(timer) clear();
  timer = setTimeout(animate, 1000 - (finish-start));
  console.log(count);
  if(count === 0) clear();
}

function clear() {
    clearTimeout(timer);
    timer = null;
}

animate();

requestAnimationFrame写法:

let count = 10;
let timer = null; // 标识动画的id
const endTime = Date.now() + count * 1000; // 结束时间
function step(timestamp) {
   const diff = endTime - Date.now();
   if(diff > 0) {
      let diffCount = Math.round(diff / 1000)
      console.log(diffCount);
      timer = window.requestAnimationFrame(step);
      if(diffCount === 0) clear();
   } else {
      clear();
   }
}

function clear() {
    cancelAnimationFrame(timer);
    timer = null;
}

step();

取消使用window.cancelAnimationFrame(rafId)