JS模拟多线程

JS 官网明确表示 JavaScript 是一种单线程语言，这意味着 JavaScript 在同一时刻只能执行一个任务。然而，有时候我们需要在 JavaScript 中模拟多个线程，以实现异步并发执行任务的目的。下面是实现 JS 模拟多线程的完整攻略。

使用 Web Workers

Web Workers 是一种在 JavaScript 中实现多线程的机制，Web Workers 可以在后台运行，在主线程执行 JavaScript 代码的同时，Web Workers 可以独立地执行耗时的操作。

Web Workers 使用 worker 对象来创建，可以使用 onmessage 和 postMessage 方法来与主线程进行通信。

Web Workers 的使用需要注意以下几个要点：

1. Web Workers 只能在 Web Worker 线程中访问的 API 和方法，不能访问 DOM 和其他主线程中的全局变量。

2. Web Workers 同样需要依赖 JavaScript 调用栈和事件循环，因此它们也不能执行无限递归的任务。

下面是一个使用 Web Workers 创建多个线程的示例：

// main.js

// 创建 3 个 Worker 线程
const threads = [
  new Worker("worker.js"),
  new Worker("worker.js"),
  new Worker("worker.js")
];

// 发送消息
threads.forEach(worker => {
  worker.postMessage({ op: "start" });
});

// 接收消息
threads.forEach(worker => {
  worker.onmessage = ({ data }) => {
    console.log(data);
  };
});

// worker.js

// 接收消息
self.onmessage = ({ data }) => {
  if (data.op === "start") {
    // 执行复杂的任务
    const result = doTask();
    // 发送结果
    self.postMessage(result);
  }
};

function doTask() {
  console.log("Worker running");
  // 执行耗时操作，例如计算质数
  let primes = [];
  for ( let i = 2;  i < 20000;  i++ )
  {
    let isPrime = true;
    for ( let j = 2;  j < i;  j++ )
    {
      if ( i % j === 0 )
      {
        isPrime = false;
        break;
      }
    }
    if ( isPrime )
    {
      primes.push(i);
    }
  }
  return primes;
}

在上面的代码中，main.js 创建了 3 个 Web Worker 线程，并向每个线程发送了一个 start 消息，表示线程开始执行工作。worker.js 接收 start 消息，并执行了一个复杂耗时的任务。当任务完成时，worker.js 将结果发送回 main.js，main.js 对结果进行输出。

使用 Promise 和 async/await

我们还可以使用 Promise 和 async/await 实现异步并发执行任务的效果，将任务封装成 Promise 并使用 async/await 进行多线程的模拟。

下面是一个使用 Promise 和 async/await 实现的多线程示例：

const task1 = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("Task 1 Done");
      resolve("Result of Task 1");
    }, 1000);
  });
};

const task2 = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("Task 2 Done");
      resolve("Result of Task 2");
    }, 2000);
  });
};

const task3 = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("Task 3 Done");
      resolve("Result of Task 3");
    }, 3000);
  });
};

(async () => {
  const [result1, result2, result3] = await Promise.all([task1(), task2(), task3()]);
  console.log(`${result1}, ${result2}, ${result3}`);
})();

以上代码中，使用 Promise.all 方法并行执行多个任务，同时使用 async/await 等待所有任务完成，并将结果一次性输出。

另外，我们也可以将 Promise 和 async/await 结合使用，将代码封装为一个类库以便于使用。