分批次处理海量数据
在处理海量数据时，使用 setTimeout 分批次处理可以避免阻塞主线程，提升页面响应性。以下是分步骤的解决方案和代码示例：
方法思路
数据分块：将大数据拆分成多个小批次（如每批100条）。
异步处理：使用
setTimeout在每批次处理结束后，让出主线程执行其他任务。递归调用：处理完当前批次后，递归调用下一批次处理，直到完成。
function processInBatches({ data, batchSize, processBatch, onFinish }) {
let currentIndex = 0;
function nextBatch() {
if (currentIndex >= data.length) {
if (onFinish) onFinish();
return;
}
// 获取当前批次数据
const batch = data.slice(currentIndex, currentIndex + batchSize);
// 处理当前批次
processBatch(batch, currentIndex);
currentIndex += batchSize;
// 使用 setTimeout 启动下一批次
setTimeout(nextBatch, 0);
}
// 开始处理
nextBatch();
}
// 使用示例
const largeData = Array.from({ length: 10000 }, (_, i) => i); // 模拟1万条数据
processInBatches({
data: largeData,
batchSize: 100, // 每批处理100条
processBatch: (batch) => {
console.log('处理批次:', batch);
// 这里执行实际的数据处理逻辑
batch.forEach(item => {
// 处理每条数据，例如更新DOM或进行计算
});
},
onFinish: () => {
console.log('所有数据处理完成！');
}
});