js 使用 Web Workers 来实现一个正确的倒计时，纵然ios手机锁屏或页面进入 ...

渣渣兔  金牌会员 | 2025-3-12 08:03:18 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 984|帖子 984|积分 2952

## 结果如上
  1. <!-- 将 main.js 和 worker.js 放在同一个目录下，然后在 HTML 文件中引入 main.js -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Web Worker 倒计时</title>
  9. </head>
  10. <body>
  11.     <h1>Web Worker 倒计时示例</h1>
  12.     <p>打开控制台查看倒计时日志。</p>
  13.     <script src="main.js"></script>
  14. </body>
  15. </html>
复制代码
  1. // main.js
  2. //主线程负责启动 Web Worker，并接收 Web Worker 发送的消息（例如倒计时的剩余时间）。
  3. function padZero(num) {
  4.   if (num < 10) {
  5.       return '0' + num;
  6.   }
  7.   return String(num);
  8. }
  9. // 创建一个新的 Web Worker
  10. const worker = new Worker('worker.js');
  12. // 向 Worker 发送消息，启动倒计时
  13. worker.postMessage({ action: 'start', duration: 60 }); // 60秒倒计时
  15. // 监听 Worker 发送的消息
  16. worker.onmessage = function (event) {
  17.     const duration = event.data.timeLeft;
  19.     if (duration <= 0) {
  20.         console.log('倒计时结束！');
  21.     } else {
  22.       const hours = Math.floor(duration / (60 * 60))
  23.       const remainMin = duration % (60 * 60)
  24.       const mins = Math.floor(remainMin / 60)
  25.       const sec = remainMin % 60
  26.       const showTime=`${padZero(hours)}:${padZero(mins)}:${padZero(sec)}`
  27.         console.log('剩余时间:', showTime);
  28.     }
  29. };
  31. // 如果需要停止倒计时，可以发送停止消息
  32. // worker.postMessage({ action: 'stop' });
复制代码
  1. // worker.js 负责执行倒计时逻辑，并将剩余时间发送回主线程
  3. let timer = null;
  5. // 监听主线程发送的消息
  6. self.onmessage = function (event) {
  7.     const { action, duration } = event.data;
  9.     if (action === 'start') {
  10.         // 记录倒计时开始的时间
  11.         let startTime = duration;
  13.         // 使用 setInterval 每秒更新一次剩余时间
  14.         timer = setInterval(() => {
  15.             const elapsed = Date.now() - startTime; // 已过去的时间
  16.             const timeLeft = startTime -1; // 剩余时间
  17.             startTime=timeLeft
  18.             if (timeLeft <= 0) {
  19.                 clearInterval(timer); // 清除定时器
  20.                 self.postMessage({ timeLeft: 0 }); // 通知主线程倒计时结束
  21.             } else {
  22.                 self.postMessage({ timeLeft }); // 发送剩余时间给主线程
  23.             }
  24.         }, 1000); // 每秒更新一次
  25.     } else if (action === 'stop') {
  26.         // 如果收到停止消息，清除定时器
  27.         clearInterval(timer);
  28.     }
  29. };
复制代码
vue的实现

  1.       // // 将 worker.js 转换为 Blob URL
  2.       // const blob = new Blob([workerCode], { type: 'application/javascript' });
  3.       // const workerURL = URL.createObjectURL(blob);
  4.       // // 初始化 Web Worker
  5.       // this.worker = new Worker(workerURL);
  6.       
  7.       // // 监听 Web Worker 发送的消息
  8.       // this.worker.onmessage = (event) => {
  9.       //   const timeLeft = event.data.timeLeft;
  10.       //   this.duration=timeLeft
  11.       //   if (timeLeft <= 0) {
  12.       //     this.setTime()
  13.       //     this.back("0")
  14.       //   } else {
  15.       //     this.setTime()
  16.       //   }
  17.       // };
  18.       // this.startCountdown()
复制代码
  1. // worker.js
  2. export const workerCode =`
  3. let myTimer = null;
  5. // 监听主线程发送的消息
  6. self.onmessage = function (event) {
  7.     const { action, duration } = event.data;
  9.     if (action === 'start') {
  10.         // 记录倒计时开始的时间
  11.         let startTime = duration;
  13.         // 使用 setInterval 每秒更新一次剩余时间
  14.         myTimer = setInterval(() => {
  15.             const timeLeft = startTime -1; // 剩余时间
  16.             startTime=timeLeft
  17.             if (timeLeft <= 0) {
  18.                 clearInterval(myTimer); // 清除定时器
  19.                 self.postMessage({ timeLeft: 0 }); // 通知主线程倒计时结束
  20.             } else {
  21.                 self.postMessage({ timeLeft }); // 发送剩余时间给主线程
  22.             }
  23.         }, 1000); // 每秒更新一次
  24.     } else if (action === 'stop') {
  25.         // 如果收到停止消息，清除定时器
  26.         clearInterval(myTimer);
  27.     }
  28. };
  29. `
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

渣渣兔

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表