如何确保visibilitychange与focus事件仅触发一次目标函数？

当窗口从后台切回前台时，visibilitychange（变为visible）和focus事件会连续触发，导致SomeFunction被重复调用。可以用以下两种方法解决：

方法一：用防抖函数控制执行频率 #

防抖函数能让目标函数在指定时间内只执行一次，不管触发多少次事件，刚好适配这种连续触发的场景。

// 实现一个简单的防抖函数
function debounce(func, delay = 200) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 把目标函数包装成防抖版本
const debouncedSomeFunction = debounce(SomeFunction);

// 绑定事件监听器
window.addEventListener("focus", debouncedSomeFunction);

document.addEventListener("visibilitychange", () => {
  if (!document.hidden) {
    debouncedSomeFunction();
  }
});

方法二：通过标记区分触发场景 #

设置一个临时标记，在visibilitychange触发后短时间内忽略focus事件，因为这两个事件通常会连续触发，以此避免重复执行。

let ignoreFocusTrigger = false;
let ignoreTimer;

window.addEventListener("focus", () => {
  if (!ignoreFocusTrigger) {
    SomeFunction();
  }
  // 重置标记
  ignoreFocusTrigger = false;
  clearTimeout(ignoreTimer);
});

document.addEventListener("visibilitychange", () => {
  if (!document.hidden) {
    SomeFunction();
    // 标记接下来200ms内忽略focus事件
    ignoreFocusTrigger = true;
    ignoreTimer = setTimeout(() => {
      ignoreFocusTrigger = false;
    }, 200);
  }
});

两种方法各有特点：

• 防抖函数简单通用，不用关心事件触发顺序，适合大多数场景；
• 标记法更精准，能明确区分是可见性变化还是主动聚焦触发的事件，适合需要严格区分触发逻辑的需求。

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