-
相对定时器的优势
-
由系统决定回调函数的执行时间,保证回调函数在屏幕每次的刷新间隔中只被执行一次,不丢帧,不卡顿.
-
CPU节能
- 定时器:当页面被隐藏或最小化时,后台仍在执行动画任务,浪费资源,
requestAnimationFrame
:在页面处理为未激活的状态下,屏幕刷新任务也会被系统暂停,因此跟着屏幕刷新率走的requestAnimationFrame
也会停止渲染,当页面再次被激活时,动画再次从上次停留的地方继续执行,节省CPU开销
-
函数节流
- 保证每个刷新间隔期间的刷新只被执行一次,既保证流畅性,又节省函数执行的开销,假设屏幕是60hz的刷新率,那么显示器每1000/60≈16.7毫秒刷新一次,多次绘制并不会在屏幕表现出来.
-
-
相关知识
requestAnimationFrame
是H5新增方法- 被绑定在window对象身上
- 接受一个回调函数作为参数
- 返回值是当前执行的唯一标志,用来清除本次执行(与计时器相似),不需要设置时间参数,会随着屏幕刷新率自动执行
-
使用
定义
let i = 0;
function step(timestamp) {
console.log(i++);
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
清除
let myReq;
let i = 0;
function step(timestamp) {
console.log(i++);
myReq = window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
document.onclick = function(){
window.cancelAnimationFrame(myReq); // 专属清除方式
}
自定义刷新率
function animate(cb,time){
let myReq; // 记录requestAnimationFrame的返回值
let i = 1; // 记录requestAnimationFrame的执行次数(屏幕刷新次数)
myReq = requestAnimationFrame(function fn(){
// 开启初始requestAnimationFrame
// 计数器 % (60/一秒钟执行的次数)
if(i%parseInt(60/(1000/time)) == 0){
cb(); // 执行真正要做的事情
}
i++; // 记录requestAnimationFrame执行的次数
myReq = requestAnimationFrame(fn); // 开启下次requestAnimationFrame
window.myReq = myReq; // 将requestAnimationFrame返回值暴露,方便清除
});
}
// 测试
animate(function(){
console.log("哒哒哒");
}, 1000); // 自定义执行时间
document.onclick = function(){
// 主动控制清除动画
cancelAnimationFrame(myReq);
}
参考资料:
全面了解requestAnimationFrame
requestAnimationFrame & 定时器
window.requestAnimationFrame