JavaScript中如何用分块处理实现大数组运算且不阻塞UI

你写的Promise版本存在的核心问题是resolve触发时机错误：首次执行完第一个分块的同步处理逻辑后就直接调用了resolve，没有等待后续通过setTimeout调度的异步分块处理完成，因此then回调拿到的只有前100个处理完成的元素。
普通同步调用后直接打印的版本同理，processLargeArray是异步执行逻辑，调用完成时后续分块还未处理，自然只能拿到部分结果。

const array1 = []
for (let i = 0; i < 1000; i++){
  array1[i] = i;
}

function processLargeArray(array) {
    return new Promise((resolve, reject) => {
      // 可根据实际业务调整单次处理的分块大小
      const chunk = 100;
      let index = 0;
      function doChunk() {
          let cnt = chunk;
          while (cnt-- && index < array.length) {
              // 此处替换为你的实际数组处理逻辑
              array[index] = array[index] * 10;
              ++index;
          } 
          if (index < array.length) {
              // 未处理完成，让出线程给UI，调度下一个分块处理
              setTimeout(doChunk, 0);
          } else {
              // 全量处理完成后再触发Promise完成
              resolve(array);
          }
      }    
      doChunk();    
    });
}

processLargeArray(array1).then((processedArray) => {
  // 此处可拿到全量处理完成的数组，执行地图重绘逻辑
  console.log(processedArray);
});

• 每次处理完100个元素后通过setTimeout将下一次分块处理放入宏任务队列，浏览器会先处理待执行的UI渲染、交互事件等任务，再执行分块处理，完全不会阻塞UI线程。
• 若对性能要求更高，可将setTimeout(doChunk, 0)替换为requestIdleCallback(doChunk)，会优先利用浏览器的空闲时段执行处理逻辑，对页面流畅度的影响更小。

内容的提问来源于stack exchange，提问作者Javier Brenes