import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props)
this.state = {
width: '10',
}
}
syncClick = () => {
let i = 0
let i2 = 0
var _this = this
console.log('start', performance.now())
requestAnimationFrame(function change(time){
console.log('rfa1', performance.now())
console.log('time1', time)
console.log(i++)
_this.id = requestAnimationFrame(change)
})
requestAnimationFrame(function change2(time){
console.log('rfa2', performance.now())
console.log('time2', time)
console.log(i2++)
_this.id2 = requestAnimationFrame(change2)
})
}
cancel = () => {
cancelAnimationFrame(this.id)
cancelAnimationFrame(this.id2)
}
render() {
return (
<div>
<div onClick={this.syncClick}>requestAnimationFrame</div>
<div onClick={this.cancel}>cancel</div>
</div>
)
}
}
export default App;
執(zhí)行結(jié)果分析:
start 3023.5950000351295
rfa1 3024.4500000262633
time1 3012.108
0
rfa2 3024.6599999954924
time2 3012.108
0
rfa1 3029.024999937974
time1 3028.78
1
rfa2 3029.2650000192225
time2 3028.78
1
rfa1 3045.629999949597
time1 3045.382
2
rfa2 3046.0800000000745
time2 3045.382
2
rfa1 3062.3699999414384
time1 3062.147
3
rfa2 3062.804999994114
time2 3062.147
3
rfa1 3079.064999939874
time1 3078.832
分析結(jié)果可知(輸出數(shù)字0-3代表幀數(shù)),
1.rfa1和rfa2在對應(yīng)相同幀的時間,基本相同
表明: 在同時觸發(fā)多次requestAnimationFrame,不會合并,但是會在同一幀中執(zhí)行,并且是順序執(zhí)行的
2.除第一幀之外,后面幀數(shù)的間距大概都是16-17之間,符合刷新頻率的規(guī)律(第一幀由于點擊觸發(fā)requestAnimationFrame時可能已經(jīng)在此幀的最后面的時間了,所以回調(diào)時間比較晚,導(dǎo)致第一幀時間比較晚)
表明: 在requestAnimationFrame回調(diào)中調(diào)用requestAnimationFrame,那么此RFA的回調(diào)會在下一幀中執(zhí)行
3.time1等于time2
表明: 同一幀requestAnimationFrame回調(diào)的執(zhí)行時間總是一樣的,都是在同一幀的渲染前調(diào)用回調(diào)
4.start大于time1
表明: 表明time1返回的并不是回調(diào)真正調(diào)用的時間,因為此時requestAnimationFrame還未注冊
返回的可能是幀渲染的開始時間(推測)
5.cancelAnimationFrame可以取消requestAnimationFrame回調(diào)的執(zhí)行,使得動畫結(jié)束
