如何让JS定时代码仅在浏览器当前激活标签页执行？

嘿，这个需求很合理——没必要在用户没关注这个页面的时候还一直发起请求，既浪费资源又可能影响性能。我们可以利用浏览器原生的Page Visibility API来完美解决它，它能精准检测当前标签页是否处于激活可见状态。

下面是修改后的完整代码：

<script type='text/javascript'>
  let msgInterval;

  // 封装启动定时请求的逻辑
  function startMsgPolling() {
    // 先执行一次请求
    getMsgs();
    // 设置定时循环请求
    msgInterval = setInterval(function() {
      getMsgs();
    }, 2500);
  }

  // 封装停止定时请求的逻辑
  function stopMsgPolling() {
    if (msgInterval) {
      clearInterval(msgInterval);
      msgInterval = null;
    }
  }

  // 页面可见性变化的处理函数
  function handleVisibilityChange() {
    if (!document.hidden) {
      // 页面切换回前台时，启动/恢复定时请求
      startMsgPolling();
    } else {
      // 页面切换到后台时，停止定时请求
      stopMsgPolling();
    }
  }

  // 初始化：页面加载时如果处于可见状态，直接启动请求
  if (!document.hidden) {
    startMsgPolling();
  }

  // 监听页面可见性变化事件
  document.addEventListener('visibilitychange', handleVisibilityChange);
</script>

核心逻辑说明： #

• document.hidden：这是Page Visibility API提供的核心属性，当标签页被切换到后台、窗口最小化时返回true，前台可见时返回false。
• visibilitychange事件：每当页面的可见状态发生变化（比如切换标签、切换应用），这个事件就会被触发，我们在事件回调里控制定时器的启停。
• 封装的启停函数：避免重复创建定时器，也让逻辑更清晰，防止出现多个定时器同时运行的问题。

这样修改后，用户切换到其他标签页时，定时器会立即被清除，不再发起getMsgs()请求；切回当前标签页时，会立刻重启定时请求，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Gracy Mathew