js 使用 Web Workers 来实现一个精确的倒计时,即使ios手机锁屏或页面进入后台,倒计时也不会暂停。

## 效果如上

html 复制代码
<!-- 将 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>
javascript 复制代码
// 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' });
javascript 复制代码
// 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的实现

javascript 复制代码
      // // 将 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()
javascript 复制代码
// 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);
    }
};
`
相关推荐
朝朝又沐沐11 分钟前
算法竞赛阶段二-数据结构(36)数据结构双向链表模拟实现
开发语言·数据结构·c++·算法·链表
YGY Webgis糕手之路12 分钟前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
魔尔助理顾问27 分钟前
系统整理Python的循环语句和常用方法
开发语言·后端·python
90后的晨仔31 分钟前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang31 分钟前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔35 分钟前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任1 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴1 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔1 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
德育处主任1 小时前
p5.js 矩形rect绘制教程
前端·数据可视化·canvas