使用Web Workers,将 async/await 操作移至另一个线程,以便在主线程中不会阻塞浏览器。
示例代码:
worker.js
// 一个耗时的操作
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 在这里使用 async/await
async function workerFunction() {
console.log('Worker: Doing some work');
await sleep(5000);
console.log('Worker: Work complete');
}
// 监听来自主线程的消息
onmessage = async function(event) {
console.log('Worker: Message received from main thread');
await workerFunction();
postMessage('Worker: Work complete');
}
main.js
// 创建 worker 实例
const myWorker = new Worker('worker.js');
// 向 worker 发送消息并收到响应
myWorker.onmessage = function(event) {
console.log('Main thread: Message received from worker');
console.log(event.data);
};
// 发送消息给 worker
console.log('Main thread: Sending message to worker');
myWorker.postMessage('Start work');