在vue中如何实现准时的setTimeout

概要

setTimeout 是不准的。因为 setTimeout 是一个宏任务，它的指定时间指的是：进入主线程的时间。

整体架构流程

当每一次定时器执行时后，都去获取系统的时间来进行修正，虽然每次运行可能会有误差，但是通过系统时间对每次运行的修复，能够让后面每一次时间都得到一个补偿。

技术细节

timer() { 
  var speed = 1000, // 设定间隔 
  counter = 1,  // 计数 
  start = new Date().getTime(); 
  // 记录理想值 ideal
  // 记录真实值 real
  // 差值 diff
  function instance(){ 
    var real = (counter * speed), 
    ideal = (new Date().getTime() - start); 
    counter++; 
    var diff = (ideal - real); 
    window.setTimeout(function() { instance(); }, (speed - diff)); // 通过系统时间进行修复 
    console.log(real/1000);
  }; 

  window.setTimeout(function() { instance(); }, speed); 
},

小结

通过系统的时间补偿，能够让我们的 setTimeout 变得更加准时，至此我们完成了如何让 setTimeout 准时的探索。