javascript - 可以使用 Promise 来处理 JavaScript 中非常长的阻塞循环吗？

Question

假设我有以下 for循环，这显然会阻塞事件循环一段时间:

function somethingExpensive() {
  let i = 0;
  while (true) {
    // Something expensive...
    if (++i === 1e10) return 'Some value.'
  }
}

我可以将该操作( for 循环)包装在 Promise 中，这样它就不会阻塞“主线程”吗？
像这样的东西:

function somethingExpensive() {
  return new Promise((resolve) => {
    let i = 0;
    while (true) {
      // Something expensive...
      if (++i === 1e10) resolve('Some value.');
    }
  });
}

Answer 1

只是在有限的范围内。如果昂贵的操作发生在同一个Javascript环境中，环境的资源将被昂贵的操作所占用，无论昂贵的操作是同步发生还是异步发生(如 Promise.resolve 之后)。例如，当操作正在进行时，用户可能无法与页面交互。

改为使用服务 worker ，以便在完全独立的环境中进行昂贵的操作，从而允许与原始页面正常交互。例如:

const workerFn = () => {
  // something expensive
  while (true) {
  }
};
const workerFnStr = `(${workerFn})();`;
const blob = new Blob([workerFnStr], { type: 'text/javascript' });
const worker = new Worker(window.URL.createObjectURL(blob));

button.onclick = () => console.log('clicked');

body {
  height: 1000px;
}

<button id="button">click</button>

那里的工作人员将消耗大量资源，但原始窗口将根据需要保持可滚动和可交互。如果没有工作人员，您要么不得不忍受原始窗口在进行昂贵的操作时没有响应，要么将昂贵的操作错开为多个便宜的 block ，例如每 100 毫秒调用一次。 (尽管，即使使用这种方法，窗口也可能不会像人们想要的那样响应 - 使用工作人员更好)