当前位置：首页 > news >正文

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

news 来源：原创 2025/5/17 4:26:59

在这里插入图片描述 ## 效果如上

<!-- 将 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([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=timeLeft
            if (timeLeft <= 0) {
                clearInterval(myTimer); // 清除定时器
                self.postMessage({ timeLeft: 0 }); // 通知主线程倒计时结束
            } else {
                self.postMessage({ timeLeft }); // 发送剩余时间给主线程
            }
        }, 1000); // 每秒更新一次
    } else if (action === 'stop') {
        // 如果收到停止消息，清除定时器
        clearInterval(myTimer);
    }
};
`