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