1
/**
2
 * 数据切片渲染
3
 * @param {number} maxFrameCount 最大刷新帧数
4
 * @param {number} stepSize 每次刷新增加的帧数(可能某次想要渲染多个时)
5
 * @example
6
 * ```html
7
 * <template v-for="n of 100" :key="n">
8
 *   <div v-if="defer(n)"></div>
9
 * </template>
32 collapsed lines
10
 *
11
 * <script setup>
12
 *   const defer = useDefer()
13
 * <script>
14
 * ```
15
 */
16
function useDefer(maxFrameCount = 1000, stepSize = 1) {
17
  let frameCount = 0
18

19
  const refreshFrameCount = () => {
20
    requestAnimationFrame(() => {
21
      // 逐步增加渲染帧数
22
      frameCount += stepSize
23

24
      // 如果渲染帧数已经达到最大值，则不再增加
25
      if (frameCount >= maxFrameCount) {
26
        return
27
      }
28

29
      // 否则继续刷新渲染
30
      refreshFrameCount();
31
    })
32
  }
33

34
  // 启动刷新渲染
35
  refreshFrameCount()
36

37
  // 返回一个函数，用于判断是否需要渲染
38
  return function (showInFrameCount) {
39
    return frameCount >= showInFrameCount;
40
  }
41
}