在vue中如何实现准时的setTimeout

文章目录

• • 概要
  • 整体架构流程
  • 技术细节
  • 小结

概要

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

整体架构流程

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

技术细节

// 以下是vue2的写法

export default {
  data() {
   return {
     timeSetTimeout: null
  };

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

    this.data.timeSetTimeout = window.setTimeout(function() { instance(); }, speed);
  },

 timer();


 beforeDestroy(){
   // 清理定时器
   clearTimeout(this.data.timeSetTimeout);
 }

},

// js写法
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 准时的探索。