当前位置：首页 > VUE

vue循环实现阻塞

2026-01-18 14:06:01VUE

在Vue中实现阻塞循环通常需要结合异步编程或定时器来控制循环的执行速度。以下是几种常见方法：

使用 `setTimeout` 分块执行

通过将循环拆分为多个小块，利用 setTimeout 让浏览器在每次迭代后有机会处理其他任务，避免阻塞主线程。

function chunkedLoop(array, callback, chunkSize = 10, delay = 0) {
  let index = 0;
  function nextChunk() {
    const end = Math.min(index + chunkSize, array.length);
    for (; index < end; index++) {
      callback(array[index], index);
    }
    if (index < array.length) {
      setTimeout(nextChunk, delay);
    }
  }
  nextChunk();
}

使用 `async/await` 和 `Promise`

通过结合 Promise 和 setTimeout 实现可控延迟，模拟阻塞效果。

async function blockingLoop(array, callback, delay = 100) {
  for (let i = 0; i < array.length; i++) {
    await new Promise(resolve => setTimeout(resolve, delay));
    callback(array[i], i);
  }
}

使用 Web Worker

将耗时循环放入 Web Worker 中执行，避免阻塞主线程。

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeArray });
worker.onmessage = (e) => {
  console.log('Worker finished:', e.data);
};

// worker.js
self.onmessage = (e) => {
  const result = e.data.data.map(item => heavyProcessing(item));
  self.postMessage(result);
};

使用 `requestAnimationFrame`

适合需要与渲染帧同步的场景，例如动画或高频数据更新。

function frameBasedLoop(array, callback) {
  let index = 0;
  function nextFrame() {
    if (index >= array.length) return;
    callback(array[index], index);
    index++;
    requestAnimationFrame(nextFrame);
  }
  nextFrame();
}