js 使用 Web Workers 来实现一个正确的倒计时，纵然ios手机锁屏或页面进入
https://i-blog.csdnimg.cn/direct/b3cf0dc2bb484a04ba0dcab8300d8be6.png## 结果如上<!-- 将 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 % 60
const 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=timeLeft
if (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(, { 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=timeLeft
if (timeLeft <= 0) {
clearInterval(myTimer); // 清除定时器
self.postMessage({ timeLeft: 0 }); // 通知主线程倒计时结束
} else {
self.postMessage({ timeLeft }); // 发送剩余时间给主线程
}
}, 1000); // 每秒更新一次
} else if (action === 'stop') {
// 如果收到停止消息，清除定时器
clearInterval(myTimer);
}
};
`
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]