描述

分片加载，适用于一次性渲染大量数据

1.示例

插入10w条数据 总用时：0ms

<template>
  <div>
    <el-button @click="onInsertData">插入10w条数据</el-button>
    <span>总用时：{{ time }}ms</span>
    <div
      v-loading="loading"
      id="xk8son2p"
      class="mt-[10px] h-[300px] p-[12px] border-1px overflow-y-auto overflow-x-hidden"
      ref="container"
    ></div>
  </div>
</template>

<script>
import { partialCb } from 'sf-utils2'

export default {
  data() {
    return {
      time: 0,
      loading: false
    }
  },
  mounted() {
    console.log(this)
  },

  methods: {
    onInsertData() {
      console.time('计时')
      const start = Date.now()
      // const list = [...new Array(10 ** 6)].map((v, vi) => ({ index: vi + 1 }))

      const list = Array.from(new Array(10 ** 5)).map((v, vi) => ({ index: vi + 1 }))

      const fragment = document.createDocumentFragment()

      // 每次回调方法
      const callbackFn = partialData => {
        for (let i = 0; i < partialData.length; i++) {
          const div = document.createElement('div')
          // console.log(i)
          div.innerHTML = partialData[i].index
          div.style.cssText = `height: 30px; display: flex; align-items: center; justify-content: center;margin-top: 10px; border: 1px solid #eee; border-radius: 4px`
          fragment.append(div)
        }
      }

      // 所有都执行结束了，回调执行的方法
      const endCallBackFn = () => {
        this.$message.success('执行结束')
        console.timeEnd('计时')
        this.$refs.container.append(fragment)
        this.time = Date.now() - start
      }
      partialCb({
        data: list,
        beforeCb: () => {
          this.loading = true
        },
        cb: callbackFn,
        afterCb: () => {
          this.loading = false
          endCallBackFn()
        },
        loopLength: 10 ** 3 // 每次切片的大小长度
      })
    }
  }
}
</script>

显示代码 复制代码 复制代码

2.入参说明

主入参

参数	说明	类型	是否必填	默认值
data	数据	Array	是	-
beforeCb	运行之前回调函数	Function	-	-
loopLength	loopLength 每次分片的大小	Number	-	-
cb	运行每次分片回调函数	Function	-	-
afterCb	运行结束回调函数	Function	-	-

3.源码

源码，点开查看 👈

/**
 * 分片加载
 * @param {Array} data 数据
 * @param {Function} beforeCb 开始之前执行
 * @param {Function} cb 回调函数
 * @param {Function} afterCb 结束后回调
 * @param {Number} loopLength 每次分片的大小
 * @param {Function} afterCb 运行结束回掉函数
 */
import { _requestAnimationFrame } from './_constant'
import isPromise from '@/base/isPromise'

function partialCb({ data = [], beforeCb, cb = new Function(), loopLength = 100, afterCb }) {
  const totalLoop = Math.ceil(data.length / loopLength)
  const _context = this
  let partialIndex = 0
  beforeCb && beforeCb()
  async function loadPartCb(_data) {
    let partialData = _data.slice(partialIndex * loopLength, loopLength * (partialIndex + 1))
    const p = cb(partialData, partialIndex, _data)
    if (isPromise(p)) await p
    if (partialIndex < totalLoop) {
      partialIndex++
      _requestAnimationFrame(loadPartCb.bind(_context, _data))
    } else {
      afterCb && afterCb()
    }
  }
  _requestAnimationFrame(loadPartCb.bind(_context, data))
}

export default partialCb