js 多线程

// 使用 Web Worker 实现多线程

// 主线程代码 (main.js)
if (window.Worker) {
    // 创建一个新的 Worker 线程
    const worker = new Worker('worker.js');

    // 发送消息给 Worker 线程
    worker.postMessage('Start processing');

    // 监听来自 Worker 线程的消息
    worker.onmessage = function(event) {
        console.log('Message from worker:', event.data);
    };

    // 错误处理
    worker.onerror = function(error) {
        console.error('Worker error:', error.message);
    };
} else {
    console.log('Web Workers are not supported in this browser.');
}

// Worker 线程代码 (worker.js)
self.onmessage = function(event) {
    console.log('Message received from main script:', event.data);

    // 模拟一些耗时任务
    let result = 0;
    for (let i = 0; i < 1e9; i++) {
        result += i;
    }

    // 将结果发送回主线程
    self.postMessage(result);
};

解释说明：

1. 主线程代码 (main.js):

   • 检查浏览器是否支持 Web Worker。
   • 创建一个新的 Worker 线程并加载 worker.js 文件。
   • 使用 postMessage 方法向 Worker 发送消息。
   • 使用 onmessage 事件监听来自 Worker 的消息。
   • 使用 onerror 事件处理 Worker 中的错误。

2. Worker 线程代码 (worker.js):

   • 使用 onmessage 事件监听来自主线程的消息。
   • 执行一些耗时任务（例如循环累加）。
   • 使用 postMessage 方法将结果发送回主线程。

通过这种方式，JavaScript 可以在浏览器中实现多线程编程，从而避免阻塞主线程。