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);
    }
};
`
相关推荐
FIN66683 分钟前
昂瑞微,凭啥?
前端·科技·产品运营·创业创新·制造·射频工程
Brookty19 分钟前
深入解析Java类加载与实例化流程
java·开发语言·学习
终焉代码42 分钟前
【C++】map与set底层结构——红黑树
开发语言·数据结构·c++
数字化顾问1 小时前
“AMQP协议深度解析:消息队列背后的通信魔法”之核心概念与SpringBoot落地实战
开发语言·后端·ruby
kura_tsuki1 小时前
[Web网页] Web 基础
前端
haing20191 小时前
使用matlab进行牛顿迭代求函数极值的方法
开发语言·matlab·牛顿迭代
kernelknight11 小时前
MATLAB For循环详解:从入门到精通的完整指南
开发语言·其他·matlab
鱼樱前端2 小时前
uni-app快速入门章法(二)
前端·uni-app
Cx330❀2 小时前
《C++ STL:vector类(下)》:攻克 C++ Vector 的迭代器失效陷阱:从源码层面详解原理与解决方案
开发语言·数据结构·c++·经验分享·算法
user_huenquan2 小时前
胡恩全10.3作业
开发语言·c++