JS/jQuery开发小游戏，如何找到窗口失焦时暂停函数与计时器的对应事件？

有两个原生事件可以满足你的需求，分别适用不同的检测场景：

• visibilitychange 事件（优先推荐） #

这个是HTML5页面可见性API提供的专属事件，专门用于检测当前浏览器标签页的可见状态。当用户切换到其他标签页、最小化浏览器窗口导致当前页面不可见时就会触发，是最贴合你需求的方案。
示例代码（原生JS）：

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 页面不可见，执行暂停逻辑：停止游戏主循环、清除计时、暂停音效等
    pauseGame();
  } else {
    // 页面重新可见时，可根据需求触发恢复逻辑
    resumeGame();
  }
});

jQuery版本示例：

$(document).on('visibilitychange', function() {
  if (document.hidden) {
    pauseGame();
  } else {
    resumeGame();
  }
});

• window.blur 事件（补充场景使用） #

如果需要检测用户切换到浏览器之外的其他应用窗口（哪怕当前标签页仍处于打开状态，但浏览器整体失焦），可以搭配这个事件使用，覆盖更全的离开场景。
示例代码：

// 窗口失焦时触发
window.addEventListener('blur', () => {
  pauseGame();
});

// 窗口重新获得焦点时触发恢复
window.addEventListener('focus', () => {
  resumeGame();
});

注意：blur事件触发阈值更低，点击浏览器地址栏、弹出系统通知等场景也可能触发，建议根据游戏的实际使用需求选择是否搭配使用，优先使用visibilitychange即可覆盖绝大多数切页面的场景。

两个事件所有现代浏览器都原生支持，不需要额外引入依赖，直接使用即可。

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