基于 requestAnimationFrame 实现的前端 定时器

官网介绍requestAnimationFrame：告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

相对于setInterval有如下有点

• 更省电，尤其是对移动终端
• 窗口没激活时，动画将停止，省计算资源
• 经过浏览器优化，动画更流畅
• 减少卡顿（因为他是跟着系统帧率走的）

整体来说性能要比setInterval要好很多

使用方法

1、npm install font-interval

2、

import Interval from 'font-interval';

import { ref } from 'vue';
let div = ref()

let i1 = new Interval((val) => {
  div.value.style.left = val + 'px' // 元素移动
  if(val >= 200) {
    i1.clear()
  }
}, 0)

/* 
  使用方式( 和setTimeout基本一致 )：
          let i1 = new Interval( 回调函数(形参为连续持续的数字 0 ~ 无穷), 时间间隔(默认0, 类型为数字或字符串数字) )
          i1.clear() // 这个用来清除定时器
*/

 附加一张动图

 

完了就.....ojbk了....如此...如此简单.....

最后最后！！！

还不快打开你的 vscode ？？？，快上车！！！！