背景

不是打广告，实在是因为咪咕体育看欧洲杯免费才用这个平台。在观看直播之前，咪咕体育会先进一段三分钟的广告。一般我会把这个页面放在后台，然后去干点别的事情等广告时间过。结果过了一会再切回页面我发现怎么广告倒计时还是两分多钟，这就意味着这几分钟时间这个广告暂停了，没走字儿。于是怀疑这里是不是监听了页面是否对用户可见。然后就想着试试整一个这样的倒计时看看是不是这样子。感觉和之前做过的页面在线心跳监控应该挺类似的。

实现

倒计时

首先肯定是需要先整一个倒计时代码（对于大家来说肯定是信手拈来了）

let startTime = 0;
let countdownDuration = 10 * 60 * 1000;
let countdownInterval = null;

function updateDisplay() {  
    let minutes = Math.floor(countdownDuration / 60000);  
    let seconds = Math.floor((countdownDuration % 60000) / 1000);  
    let display = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;  
    console.log(display)
}


function startCountdown() {  
    countdownInterval = setInterval(() => {
      countdownDuration -= 1000;
      updateDisplay();
    }, 1000)
}

这样就实现了一个在控制台倒计时的功能了效果大概就是这样子

监听页面状态

为了实现监听页面是否对用户可见这一功能，我们可以监听一个特定的事件——visibilitychange。这个事件能够精确地告诉我们页面是否正被用户查看。

根据MDN（Mozilla Developer Network）的解释，visibilitychange事件会在以下情况触发：当网页所在选项卡的内容从可见变为隐藏，或者从隐藏变为可见时。具体来说，如果用户导航至新页面、切换了浏览器标签、关闭了当前标签、最小化了浏览器窗口，甚至在移动设备上从浏览器应用切换至其他应用，都会引发这个事件。在这些情况下，如果页面变得不可见，其visibilityState属性会变为hidden。

值得注意的是，当页面状态过渡到hidden时，这通常是页面能够可靠捕捉到的最后一个事件。因此，对于开发人员来说，这是一个重要的信号，可能意味着用户会话的结束。例如，这时可以用来发送用户行为分析数据，从而帮助理解用户的使用习惯和页面性能。

请注意，Page Visibility API可能不在所有浏览器中都被完全支持，因此在使用前最好检查其兼容性。此外，这个API主要用于检测整个页面的可见性，而不是单个元素。如果你需要检测单个元素是否对用户可见，可能需要使用其他方法，例如通过计算元素的位置和大小来判断其是否在视口内。

如果想监听单个元素是否在视口内，可以考虑使用Intersection Observer API来监听单个元素是否展示在视口范围内。有兴趣的朋友可以看看这里developer.mozilla.org/en-US/docs/…

为了方便观察在切屏后的现象，还需要一个记录切屏后时常的方法，然后还需要在启动倒计时的时候停止记录切屏时间的事件。完整代码如下

  let startTime = 0;
  let countdownDuration = 10 * 60 * 1000;

  let stopDuration = 0;
  let stopInterval = null;
  let countdownInterval = null;
  
  function updateDisplay() {  
    let minutes = Math.floor(countdownDuration / 60000);  
    let seconds = Math.floor((countdownDuration % 60000) / 1000);  
    let display = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;  
    console.log(display)
  }

  
  function startCountdown() {  
    clearInterval(stopInterval);  
    countdownInterval = setInterval(() => {
      countdownDuration -= 1000;
      updateDisplay();
    }, 1000)
  }
  
  function updateStopDisplay() {  
    let minutes = Math.floor(stopDuration / 60000);  
    let seconds = Math.floor((stopDuration % 60000) / 1000);  
    let display = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;  
    console.log('stop---duration----: ', display)
  }
  
  // 停止倒计时  
  function stopCountdown() {  
    clearInterval(countdownInterval);  
    stopInterval = setInterval(() => {
      stopDuration += 1000;
      updateStopDisplay();
    }, 1000)
  }  
  
 // 处理页面可见性变化事件  
 document.addEventListener("visibilitychange", function() {  
    if (document.visibilityState === 'visible') {  
      startCountdown(); // 页面可见时开始或恢复倒计时  
    } else {  
      stopCountdown(); // 页面不可见时停止倒计时  
    }  
 });  
 
 // 初始化并开始倒计时  
 startCountdown();

这样我们就可以做到，当页面在前台时查看倒计时事件，在页面切换后，页面开始记录页面不可见的事件方便我们观察。然后我们就可以得到下面的结果了。

最后

辣鸡丹麦害我白打一天工

关于咪咕体育的广告倒计时挂在后台倒计时不减少这个事儿

背景

实现

倒计时

监听页面状态

最后