封装 requestAnimationFrame 来代替 setTimeout

最近看antdv 某些组件源码的时候发现，是使用requestAnimationFrame 来代替 setTimeout；下面我们就来看看是如何实现的；
首先 requestAnimationFrame与setTimeout相比，requestAnimationFrame 最大的优势是由浏览器来决定回调函数的执行时机，即紧跟浏览器的刷新步调。
其次，CPU节能：使用setTimeout实现的动画，当页面被隐藏(隐藏的)或最小化(后台标签页)时，setTimeout仍然在后台执行动画任务(只不过执行时间有所延迟)，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，而且还浪费 CPU 资源和电池寿命。而requestAnimationFrame则完全不同，当页面处于未激活的状态下，该页面的屏幕绘制任务也会被浏览器暂停，因此跟着浏览器步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了 CPU 开销，提升性能和电池寿命。

// getRequestAnimationFrame.js
// 判断是否支持 requestAnimationFrame/cancelAnimationFrame ｜setTimeout/clearTimeout，根据支持语法返回对应的方法const availablePrefixs = ['moz', 'ms', 'webkit']function requestAnimationFramePolyfill () {let lastTime = 0return function (callback) {const currTime = new Date().getTime()const timeToCall = Math.max(0, 16 - (currTime - lastTime))const id = window.setTimeout(function () {callback(currTime + timeToCall)}, timeToCall)lastTime = currTime + timeToCallreturn id}
}export default function getRequestAnimationFrame () {if (typeof window === 'undefined') {return () => {}}if (window.requestAnimationFrame) {// https://github.com/vuejs/vue/issues/4465return window.requestAnimationFrame.bind(window)}const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[0]return prefix ? window[`${prefix}RequestAnimationFrame`] : requestAnimationFramePolyfill()
}export function cancelRequestAnimationFrame (id) {if (typeof window === 'undefined') {return null}if (window.cancelAnimationFrame) {return window.cancelAnimationFrame(id)}const prefix = availablePrefixs.filter(key => `${key}CancelAnimationFrame` in window || `${key}CancelRequestAnimationFrame` in window)[0]return prefix? (window[`${prefix}CancelAnimationFrame`] || window[`${prefix}CancelRequestAnimationFrame`]).call(this, id): clearTimeout(id)
}

// requestAnimationTimeout.js
// 创建自定 方法 requestAnimationTimeout 用于延迟执行
// 创建自定 方法 cancelAnimationTimeout 用于清除还未执行的requestAnimationTimeout
import getRequestAnimationFrame, {cancelRequestAnimationFrame
} from './getRequestAnimationFrame'const dataSetTimeout = getRequestAnimationFrame()export const cancelAnimationTimeout = frame => cancelRequestAnimationFrame(frame.id)export const requestAnimationTimeout = (callback, delay = 0) => {const start = Date.now()function timeout () {if (Date.now() - start >= delay) {callback.call()} else {obj.id = dataSetTimeout(timeout)}}const obj = {id: dataSetTimeout(timeout)}return obj
}

使用就直接引入 requestAnimationTimeout.js 导出其 {requestAnimationTimeout, cancelAnimationTimeout } 方法；

requestAnimationTimeout 方法会返回一个 object 对象, 包含一个id值；如果需要取消执行，cancelAnimationTimeout(/* 将 requestAnimationTimeout 方法会返回一个 object 对象，作为参数*/)；

希望能对你有帮助！

封装 requestAnimationFrame 来代替 setTimeout相关推荐

vue使用优化后的动画级别的定时器 requestAnimationFrame 比setInterval, setTimeout效果要高很多
vue使用优化后的动画级别的定时器 requestAnimationFrame 比setInterval, setTimeout效果要高很多概述默认情况下,requestAnimationFram ...
【第二届青训营-寒假前端场】- 「前端动画实现」笔记
动画的基本原理动画是什么动画发展史计算机动画前端动画分类 css动画 animation-name animation-duration animation-timing-function a ...
用requestAnimationFrame和cancelAnimationFrame取代定时器setTimeout和clearTimeout
1. 浏览器的刷新时间和定时器的时间不同,会出现掉帧现象,定时器的时间越短,掉帧越严重.定时器的时间并不是非常精准,会将定时器放在执行队列中,也是要花费时间的. 浏览器的刷新时间大约是16ms(电脑此 ...
setTimeout/setInterval与requestAnimationFrame的区别？
提到 setTimeout/setInterval 以及 requestAnimationFrame,大家的第一反应是动画相关的两个 API. 什么是web 动画我们来谈谈什么是动画.动画其实是一种 ...
关系图d3、封装js
demo:https://github.com/binliuli/visual.git 有的时候需要自己封装js所谓的组件,参考:使用 data-* 属性来嵌入自定义数据 list: visual: ...
动画requestAnimationFrame
前言在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...
setTimeout(0) 即将退役
相信所有做前端开发的同学都会经常使用 setTimeout(0) 来做很多事情,这个一度成为解决了很多前端疑难杂症的法宝.而且大家也知道 setTImeout(0) 的极限在16ms左右.也许很多人没 ...
深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame
前面的话与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好处呢?为什么requestAnimationFrame被称为神器呢 ...
【JavaScript 刨根问底之】requestAnimationFrame以及延时器
requestAnimationFrame 这里会说下requestAnimationFrame的由来,以及为什么会出现它.同时也会横向对比下定时器以及延时器早期的动画动画是一个持续的过程.早期的 ...

封装 requestAnimationFrame 来代替 setTimeout

封装 requestAnimationFrame 来代替 setTimeout相关推荐

最新文章

热门文章