JavaScript 窗口焦点与可见性事件的精准控制：实现单次函数调用

// 初始的、可能导致重复触发的代码
window.addEventListener("focus", (event) => {
    SomeFunction(); // 可能会与 visibilitychange 导致的调用重复
});

document.addEventListener("visibilitychange", (event) => {
  if (!document.hidden) { // 只关注变为可见的状态
    SomeFunction(); // 可能会与 focus 导致的调用重复
  }
});

function SomeFunction() {
    console.log("Function called!"); // 可能会被调用两次
}

// 定义一个变量来记录上次处理事件的时间和类型，用于去重
let lastProcessedTime = 0;
let lastProcessedEventType = null;
const DEBOUNCE_THRESHOLD = 50; // 毫秒，用于判断事件是否为“几乎同时”发生

function handleWindowActivation(event) {
    const currentTime = Date.now();

    // 当文档变为可见时，通常 visibilitychange 会先触发
    if (event.type === "visibilitychange" && !document.hidden) {
        // 如果距离上次处理时间超过阈值，或者上次处理的不是 visibilitychange 事件，则处理
        if (currentTime - lastProcessedTime > DEBOUNCE_THRESHOLD || lastProcessedEventType !== "visibilitychange") {
            console.log("窗口变为可见，执行核心逻辑:", event.type);
            // 这里放置您的核心业务逻辑
            executeCoreLogic();

            lastProcessedTime = currentTime;
            lastProcessedEventType = event.type;
        } else {
            console.log("忽略重复的 visibilitychange 事件。");
        }
    }
    // 当窗口获得焦点时
    else if (event.type === "focus") {
        // 如果焦点事件紧跟在可见性变化事件之后（在阈值时间内），则忽略此焦点事件
        if (lastProcessedEventType === "visibilitychange" && (currentTime - lastProcessedTime < DEBOUNCE_THRESHOLD)) {
            console.log("忽略紧随 visibilitychange 之后的 focus 事件。");
            return; // 退出，不执行核心逻辑
        }

        // 如果距离上次处理时间超过阈值，或者上次处理的不是 focus 事件，则处理
        if (currentTime - lastProcessedTime > DEBOUNCE_THRESHOLD || lastProcessedEventType !== "focus") {
            console.log("窗口获得焦点，执行核心逻辑:", event.type);
            // 这里放置您的核心业务逻辑
            executeCoreLogic();

            lastProcessedTime = currentTime;
            lastProcessedEventType = event.type;
        } else {
            console.log("忽略重复的 focus 事件。");
        }
    }
}

// 示例核心逻辑函数
function executeCoreLogic() {
    console.log("核心业务逻辑已执行！");
    // 实际应用中，这里可以执行数据刷新、动画播放等操作
}

// 注册事件监听器
window.addEventListener("focus", handleWindowActivation);
document.addEventListener("visibilitychange", (event) => {
    // 只有当文档变为可见时才调用处理函数
    if (!document.hidden) {
        handleWindowActivation(event);
    }
});