【js】js多线程解决方案Web Worker简单说明与实例演示:
// 主线程文件 main.js
// 创建并使用 Web Worker
// 检查浏览器是否支持 Web Worker
if (typeof Worker !== 'undefined') {
// 创建一个新的 Web Worker
const worker = new Worker('worker.js'); // 'worker.js' 是 Web Worker 脚本文件
// 向 Web Worker 发送数据
worker.postMessage({ msg: 'Hello, Web Worker!' });
// 接收 Web Worker 发送回来的数据
worker.onmessage = function(event) {
console.log('Received message from worker:', event.data);
};
// 监听 Web Worker 的错误
worker.onerror = function(error) {
console.error('Error from worker:', error);
};
// 当 Web Worker 处理完毕后,会自动关闭。
// 如果需要提前关闭 Web Worker,可以使用 worker.terminate() 方法。
} else {
console.log('Your browser doesn\'t support Web Workers.');
}
// Web Worker 文件 worker.js
// 这是 Web Worker 的代码,它在一个单独的线程中运行
// 处理消息
onmessage = function(event) {
// 在这里处理接收到的消息
console.log('Message from main script:', event.data.msg);
// 执行一些计算任务...
// 发送消息回主线程
postMessage({ result: 'Processed data in Web Worker' });
};
// 当 Web Worker 处理完毕后,会自动关闭。
// 如果需要提前关闭 Web Worker,可以在主线程使用 worker.terminate() 方法。
以上代码演示了如何在主线程中创建并使用一个 Web Worker。主线程发送消息给 Worker,Worker 处理完毕后再将结果发送回主线程。这样可以在不阻塞用户界面的前提下执行耗时任务。
评论已关闭