页面计时器不准确,怎么解决?

倒计时为啥不准

先说原因:JavaScript是单线程,setTimeout (主线程空闲时才会去执行任务)的回调函数会被放入事件队列,既然要排队,就可能被前面的任务阻塞导致延迟 。且任务本身从call stack(执行栈)中拿出来执行也要耗时。所以有1000变1002也合理。就算setTimeout的第二个参数设为0,也会有至少有4ms的延迟。

javascript 复制代码
let total = 9  // 倒计时9s
    let preStamp = Date.now();
    let nowStamp = preStamp;
    const countDown = ()=>{
        if(total > 0){
          preStamp = nowStamp
          nowStamp = Date.now();
          total--
          console.log('最后时间:',new Date().toLocaleString(),'总共耗时:', nowStamp - preStamp)
          setTimeout(countDown ,1000)
        }
      }
      countDown()

正常情况下,浏览器tab页是激活或者显示状态下:

有几毫秒的误差也正常,毕竟setTimeout是先把任务放到任务队列里,等主线程空闲时才会去执行。

但是有一种情况,就是tab页或者页面不显示或者隐藏时,倒计时函数的误差就会非常大:

原因:当页面处于后台时,浏览器会降低定时器的执行频率以节省资源,导致 setTimeout 的延迟增加。切回来后又正常了

解决办法

1. 监听 visibilitychange 事件,在切回tab时修正(不推荐)

javascript 复制代码
let timer:any = null;
    let total = 20  // 倒计时9s
    let preStamp = Date.now();
    let nowStamp = preStamp;
    useEffect(() => {
        const handleVisibilityChange = () => {
          console.log('Page is visible:', document.visibilityState);
          if(document.visibilityState === 'visible'){
            preStamp = Date.now();
            nowStamp = preStamp;
            countDown()
          }else{
            timer && clearTimeout(timer)
          }
        };

        // 添加事件监听器
        document.addEventListener('visibilitychange', handleVisibilityChange);
        // 清理函数:移除事件监听器
        return () => {
            document.removeEventListener('visibilitychange', handleVisibilityChange);
        };
    })
    const countDown = ()=>{
        if(total > 0){
          preStamp = nowStamp
          nowStamp = Date.now();
          total--
          nowStamp - preStamp && console.log('最后时间:',new Date().toLocaleString(),'总共耗时:', nowStamp - preStamp)
          timer = setTimeout(countDown ,1000)
        }
      }
      countDown()

当前代码是,tab隐藏的时候停掉倒计时,可以保证页面显示的时候倒计时还是每一秒执行一次(这种情况只能用来控制动画,如果是有特殊操作,就不能用这个方法了)。有的博主可能是在tab隐藏时调整倒计时的频次,就是setTimeout的第二个参数,但是我尝试了,不停掉计时器,倒计时会一直跑,而且,隐藏的tab页面时间越久,误差会越大,没有任何意思!

2. web worker(推荐)

复制代码
用web worker,单独的线程去计时,不会受切tab影响
javascript 复制代码
//worker.ts
let total = 9;
let startTime = Date.now();
let preStamp = Date.now();
let nowStamp = preStamp;
const countDown = () => {
  const elapsed = Math.floor((Date.now() - startTime) / 1000);
  const remaining = total - elapsed;
  if (remaining > 0) {
    preStamp = nowStamp
    nowStamp = Date.now();
    postMessage({cutN: remaining, time: nowStamp - preStamp});
    setTimeout(countDown, 1000);
  } else {
    postMessage(0);
  }
};

countDown();
javascript 复制代码
//index.ts
  const worker = new Worker(new URL('./worker.ts', import.meta.url));
    worker.onmessage = (e) => {
      console.log('剩余时间:', e.data.cutN, '当前时间:', new Date().toLocaleString(), e.data.time);
    };

tab页面隐藏后,倒计时正常执行,准确度也很好;

//文中有不对或者不严谨的地方谢谢这正,小的看见会立刻纠正改过,重新做人!!!

相关推荐
吃饭睡觉打豆豆嘛1 小时前
彻底搞懂前端路由:从 Hash 到 History 的演进与实践
前端·javascript
lbh2 小时前
简单文本编辑器:基于原生JavaScript的智能文本选择工具栏
前端·javascript
典学长编程2 小时前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第三天(JavaScript)
前端·javascript·css·html·前端开发
Jimmy4 小时前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript
Spider_Man5 小时前
栈中藏玄机:从温度到雨水,单调栈的逆袭之路
javascript·算法·leetcode
jstart千语5 小时前
【vue】创建响应式数据ref和reactive的区别
前端·javascript·vue.js
BUG收容所所长5 小时前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
BUG收容所所长5 小时前
React递归渲染与react-dnd——低代码平台的组件拖拽与动态渲染实践
前端·javascript·设计
小妖6666 小时前
Next.js 怎么使用 Chakra UI
前端·javascript·ui
胡西风_foxww6 小时前
从数据丢失到动画流畅:React状态同步与远程数据加载全解析
前端·javascript·react.js·同步·异步·数据·状态