在vue中如何实现准时的setTimeout

概要

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

整体架构流程

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

技术细节

timer() {
  var speed = 1000, // 设定间隔
    counter = 1,  // 计数
    start = new Date().getTime();  // 记录开始时间

  // 定义函数 instance
  function instance() {
    var real = (counter * speed), // 真实值
      ideal = (new Date().getTime() - start); // 理想值

    counter++; // 计数+1
    var diff = (ideal - real); // 差值

    // 通过系统时间进行修复
    window.setTimeout(function() {
      instance();
    }, (speed - diff));

    console.log(real / 1000); // 输出真实值除以1000
  };

  // 第一次调用 instance
  window.setTimeout(function() {
    instance();
  }, speed);
},

小结

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