分时函数

背景

假设页面中有 1000 条数据需要渲染，如果页面不分页的话，一次渲染出着 1000 条数据会让页面性能差，可能出现卡顿的情况，那么该如何处理这种一次需要渲染一大堆数据的情况的问题呢？

实现方案

分页渲染，参考表格数据。分页渲染可以减少当前页面中渲染数据节点个数，效果非常明显。
分时渲染。有时这些数据必须全部渲染在一个页面中，分页渲染失效。

分时渲染是在一段时间内渲染一部分数据，直至将所有数据渲染结束，比如原先 1s 渲染 1000 条数据，改为 200ms 渲染 10 条数据。

代码

/**
 *
 * @param {Array} arr array dataset to render
 * @param {Function} fn render fn
 * @param {Number} num number of fn task ervey time
 */
function timeChunk(arr = [], fn, delay = 200, num = 1) {
  let timer = setInterval(() => {
    if (!arr.length) clearInterval(timer);

    let length = Math.min(num, arr.length);
    let subArr = arr.slice(0, length);
    fn(subArr);

    arr = arr.slice(length);
  }, delay);
}

let arr = [];
for (let i = 0; i < 1000; i++) {
  arr.push(i);
}

function log(info) {
  console.log(info);
}

timeChunk(arr, log, 200, 10);

参考

JavaScript 设计模式与开发实践

分时函数 ​

背景 ​

实现方案 ​

代码 ​

参考 ​

分时函数

背景

实现方案

代码

参考