页面失焦时setInterval内timeOutOfFocus变量未递增问题排查

测试URL中运行以下JavaScript代码，预期当timeOutOfFocus≥3时执行function2，但页面失焦后控制台显示timeOutOfFocus从未递增。

代码示例 #

// Initialize variables
let timeOutOfFocus = 0; // To track how long the tab has been out of focus
let timer; // Timer variable for interval

// Function to do something when the timer is timed out
function function2() {

  // do something
}

// Event listener for visibility change
document.addEventListener('visibilitychange', function() {
  // If the tab becomes hidden (out of focus)
  if (document.hidden) {
    console.log('Tab is out of focus'); // Display a message
    timer = setInterval(() => {
      timeOutOfFocus++; // Increment the time out of focus
      console.log(`Out of focus for: ${timeOutOfFocus} seconds`); // Display the time out of focus
      console.log(`Timer value: ${timer}`); // Display the timer value

      // If the tab has been out of focus for 3 seconds
      if (timeOutOfFocus >= 3) {
        function2(); // Call the  function2 function     
        clearInterval(timer); // Clear the timer
      }
    }, 1000); // Run every 1000 milliseconds (1 second)
  } else {
    console.log('Tab is in focus'); // Display a message
    clearInterval(timer); // Clear the timer
    timeOutOfFocus = 0; // Reset the time out of focus counter
  }
});

控制台截图 #

问题原因 #

浏览器为优化性能、节省资源，当标签页处于隐藏状态时，会大幅限制setInterval的执行频率（甚至直接暂停执行）。你的代码依赖setInterval每秒递增timeOutOfFocus，但标签页失焦后定时器几乎不运行，导致变量无法按预期递增。

修复方案 #

不要依赖定时器计数，改用时间戳计算页面隐藏时长，这种方式不受浏览器后台定时器节流的影响。

方案1：失焦期间实时计算时长（兼容后台执行逻辑）

let hiddenStartTime;

function function2() {
  // 这里编写你的业务逻辑
  console.log("执行function2");
}

document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    console.log('Tab is out of focus');
    hiddenStartTime = Date.now();
    
    // 递归调用setTimeout，实时计算隐藏时长
    const checkDuration = () => {
      if (document.hidden) {
        const duration = Math.floor((Date.now() - hiddenStartTime) / 1000);
        console.log(`Out of focus for: ${duration} seconds`);
        
        if (duration >= 3) {
          function2();
        } else {
          // 即使后台被节流，也能在允许执行时计算最新时长
          setTimeout(checkDuration, 1000);
        }
      }
    };
    setTimeout(checkDuration, 1000);
  } else {
    console.log('Tab is in focus');
  }
});

方案2：页面恢复显示时检查总隐藏时长

如果不需要实时打印时长，只需要在页面失焦超过3秒时执行function2，可以简化为：

let hiddenStartTime;

function function2() {
  // 这里编写你的业务逻辑
  console.log("执行function2");
}

document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    console.log('Tab is out of focus');
    hiddenStartTime = Date.now();
  } else {
    console.log('Tab is in focus');
    const totalHiddenSeconds = Math.floor((Date.now() - hiddenStartTime) / 1000);
    if (totalHiddenSeconds >= 3) {
      function2();
    }
  }
});

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