## 效果如上
<!-- 将 main.js 和 worker.js 放在同一个目录下，然后在 HTML 文件中引入 main.js --><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Web Worker 倒计时</title>
</head>
<body><h1>Web Worker 倒计时示例</h1><p>打开控制台查看倒计时日志。</p><script src="main.js"></script>
</body>
</html>
// main.js
//主线程负责启动 Web Worker，并接收 Web Worker 发送的消息（例如倒计时的剩余时间）。
function padZero(num) {if (num < 10) {return '0' + num;}return String(num);
}
// 创建一个新的 Web Worker
const worker = new Worker('worker.js');// 向 Worker 发送消息，启动倒计时
worker.postMessage({ action: 'start', duration: 60 }); // 60秒倒计时// 监听 Worker 发送的消息
worker.onmessage = function (event) {const duration = event.data.timeLeft;if (duration <= 0) {console.log('倒计时结束！');} else {const hours = Math.floor(duration / (60 * 60))const remainMin = duration % (60 * 60)const mins = Math.floor(remainMin / 60)const sec = remainMin % 60const showTime=`${padZero(hours)}:${padZero(mins)}:${padZero(sec)}`console.log('剩余时间:', showTime);}
};// 如果需要停止倒计时，可以发送停止消息
// worker.postMessage({ action: 'stop' });
// worker.js 负责执行倒计时逻辑，并将剩余时间发送回主线程let timer = null;// 监听主线程发送的消息
self.onmessage = function (event) {const { action, duration } = event.data;if (action === 'start') {// 记录倒计时开始的时间let startTime = duration;// 使用 setInterval 每秒更新一次剩余时间timer = setInterval(() => {const elapsed = Date.now() - startTime; // 已过去的时间const timeLeft = startTime -1; // 剩余时间startTime=timeLeftif (timeLeft <= 0) {clearInterval(timer); // 清除定时器self.postMessage({ timeLeft: 0 }); // 通知主线程倒计时结束} else {self.postMessage({ timeLeft }); // 发送剩余时间给主线程}}, 1000); // 每秒更新一次} else if (action === 'stop') {// 如果收到停止消息，清除定时器clearInterval(timer);}
};
vue的实现
// // 将 worker.js 转换为 Blob URL// const blob = new Blob([workerCode], { type: 'application/javascript' });// const workerURL = URL.createObjectURL(blob);// // 初始化 Web Worker// this.worker = new Worker(workerURL);// // 监听 Web Worker 发送的消息// this.worker.onmessage = (event) => {// const timeLeft = event.data.timeLeft;// this.duration=timeLeft// if (timeLeft <= 0) {// this.setTime()// this.back("0")// } else {// this.setTime()// }// };// this.startCountdown()
// worker.js
export const workerCode =`
let myTimer = null;// 监听主线程发送的消息
self.onmessage = function (event) {const { action, duration } = event.data;if (action === 'start') {// 记录倒计时开始的时间let startTime = duration;// 使用 setInterval 每秒更新一次剩余时间myTimer = setInterval(() => {const timeLeft = startTime -1; // 剩余时间startTime=timeLeftif (timeLeft <= 0) {clearInterval(myTimer); // 清除定时器self.postMessage({ timeLeft: 0 }); // 通知主线程倒计时结束} else {self.postMessage({ timeLeft }); // 发送剩余时间给主线程}}, 1000); // 每秒更新一次} else if (action === 'stop') {// 如果收到停止消息，清除定时器clearInterval(myTimer);}
};
`
)
)
