window.requestAnimationFrame帧渲染

语法window.requestAnimationFrame(callback)

会根据显示器的刷新率进行渲染,如果显示器是16ms刷新一次,那么window.requestAnimationFrame将会每16ms执行一次,这样避免了setTimeout可能出现的动画卡顿,丢帧的情况。

除了用于动画之外,还可以用于数据的分批渲染。

假设有100条数据要显示,想分100次渲染,每次渲染1条,这种情况挺常见,比如要渲染的是有大图的列表,那么:

const data = new Array(100);
function refresh(data,oneceCount){
    let count = 0
    const total = data.length
    const loopCount = total / onceCount 
   function refreshAnimation() {
      /*
      * 在此处渲染数据
      */
     if (count < loopCount) {
       count++
       requestAnimationFrame(refreshAnimation)
     }
   }
   requestAnimationFrame(refreshAnimation)        
}
refresh(data,1);

  

猜你喜欢

转载自www.cnblogs.com/BlueCc/p/12167181.html