如何简化功能相同但调用场景不同的两个JavaScript函数？

你现在有两个逻辑完全一致的函数，仅触发场景不同：移动端在用户10秒无活动时调用inactiveUserMessage，桌面端在鼠标离开页面时调用exitUserMessage，且两个操作需要在dataLayer中独立追踪。以下是具体简化方案：

原代码回顾 #

重复的函数定义 #

//display popup for inactive users
const inactiveUserMessage = () => {
    //other code was here but deleted bc not relevant
    return dismissModal();
};

//display popup for users leaving the page
function exitUserMessage() {
    //other code was here but deleted bc not relevant
    return dismissModal();
}

原调用逻辑 #

if (width <= 480) {
    // Start the timer on page load
    window.addEventListener("load", () => {
        timer = setTimeout(inactiveUserMessage, 10000);
    });
    document.addEventListener("mousemove", debounce(inactiveUserMessage, 10000), timer);
} else {
    // Trigger popup for desktop
    document.addEventListener("mouseleave", (e) => {
        if (Evergage.cashDom("#abandon-cart-message").length === 0) {
            return exitUserMessage();
        }
    });
}

简化方案 #

核心思路是合并重复函数，通过参数区分追踪场景，既减少代码冗余，又满足独立行为追踪的需求。

1. 合并为单一函数 #

把两个重复函数整合成一个，新增triggerType参数标记触发场景（移动端无活动/桌面端离开），方便后续在dataLayer中做区分追踪：

// 统一的弹窗触发函数，通过triggerType区分场景
const showAbandonCartPopup = (triggerType) => {
    // 保留原来的核心逻辑（比如弹窗展示逻辑）
    // ...原来的other code
    
    // 根据triggerType做独立的dataLayer追踪
    // 示例：dataLayer.push({ event: `abandon_cart_${triggerType}` });
    
    return dismissModal();
};

2. 修改调用逻辑，复用统一函数 #

将原来调用不同函数的地方，改为调用新函数并传入对应triggerType：

if (width <= 480) {
    // 移动端：无活动触发，传入"inactive"类型
    window.addEventListener("load", () => {
        timer = setTimeout(() => showAbandonCartPopup("inactive"), 10000);
    });
    document.addEventListener("mousemove", debounce(() => showAbandonCartPopup("inactive"), 10000), timer);
} else {
    // 桌面端：鼠标离开触发，传入"exit"类型
    document.addEventListener("mouseleave", (e) => {
        if (Evergage.cashDom("#abandon-cart-message").length === 0) {
            return showAbandonCartPopup("exit");
        }
    });
}

额外优化建议 #

• 可以把triggerType的取值定义为常量（比如const TRIGGER_TYPES = { INACTIVE: "inactive", EXIT: "exit" }），避免拼写错误，提升代码可维护性；
• 确保debounce函数的定时器取消逻辑和原有timer变量的配合正常工作。

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