背景：近期在做一个大屏看板的时候，有一个图表后端会一次性返回很多调数据（如：10万条，或者更多）。
为何前端处理：因为是看板图表，无法做分页，只能一次返回
实现方法：
思路：将后端返回数据进行分组、分堆处理，然后再一次组合使用
- 我们先写一个函数，用于将10万条数据进行分堆
- 所谓的分堆其实思想就是一次截取一定长度的数据
- 比如一次截取10条数据，
头一次截取0~9，第二次截取10~19等固定长度的截取 - 举例原来的数据是：
[1,2,3,4,5,6,7] - 假设我们分堆以后，一堆分3个，那么得到的结果就是二维数组了
- 即：
[ [1,2,3], [4,5,6], [7]] - 然后就遍历这个二维数组，得到每一项的数据，即为每一堆的数据
- 进而使用定时器一点点、一堆堆赋值渲染即可
1、分组分批分堆函数，如下：（一堆分10个）
averageFn(arr) {
let i = 0; // 1. 从第0个开始截取
let result = []; // 2. 定义结果，结果是二维数组
while (i < arr.length) { // 6. 当索引等于或者大于总长度时，即截取完毕
// 3. 从原始数组的第一项开始遍历
result.push(arr.slice(i, i + 10)); // 4. 在原有十万条数据上，一次截取10个用于分堆
i = i + 10; // 5. 这10条数据截取完，再截取下十条数据，以此类推
}
return result; // 7. 最后把结果丢出去即可
}2、创建定时器依次赋值渲染，如下：
async plan() {
this.loading = true;
const res = await axios.get("http://ashuai.work:10000/bigData");
this.loading = false;
let twoDArr = averageFn(res.data.data);
for (let i = 0; i < twoDArr.length; i++) {
// 相当于在很短的时间内创建许多个定时任务去处理
setTimeout(() => {
this.arr = [...this.arr, ...twoDArr[i]]; // 赋值渲染
}, 1000 * i); // 17 * i // 注意设定的时间间隔... 17 = 1000 / 60
}
},这种方式，相当于在很短的时间内创建许多个定时任务去处理，定时任务太多了，也耗费资源啊。
如果采取这种方式得话，建议如下：
- 可以拉长定时任务的时间，避免短时间多次执行定时任务导致卡顿，甚至瘫痪
- 截取数据的时候一次可以多截取几条，尽量在允许的情况下少分堆
实际上，这种方式就有了大数据量分页的思想
以上测试有效！！！ 感谢支持！！！
声明：本文参考与以下作者
作者：水冗水孚
链接：https://juejin.cn/post/7205101745936416829
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。