window.requestAnimationFrame Frame Rendering

Syntax window.requestAnimationFrame (callback)

It will be rendered in accordance with the refresh rate of the display, if the display is refreshed every 16ms, then window.requestAnimationFrame will be performed once every 16ms, thus avoiding possible setTimeout animation Caton, frame loss situation.

In addition to animation, it can also be used to render data in batches.

Suppose there are 100 data to be displayed, to 100 points render, rendering each one, this is quite common, such as to render the big picture there is a list, then:

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);