如何在JS函数中创建变量闭包 实现多滑块交互状态独立存储

你遇到的变量访问问题本质是JavaScript词法作用域规则导致的：startInteraction、endInteraction两个函数定义在闭包作用域之外，函数只能访问自身声明时所在作用域的变量，自然无法读取到闭包内部的initialX和isInSwipe。

方案1：将交互函数移到闭包内部（最简洁） #

直接把两个交互函数定义在闭包作用域内，就能直接访问闭包私有变量，每个slider实例的状态完全隔离，调用方式和原来完全一致。

function slideInteractions(selector, callback) {
    return function() {
        let initialX = 0;
        let isInSwipe = false;
        const sliderEl = document.querySelector(selector);

        // 交互函数定义在闭包内部，可直接访问私有变量
        function startInteraction(ev) {
            isInSwipe = true;
            // 兼容鼠标/触摸事件的坐标取值
            initialX = ev.type.includes('mouse') ? ev.clientX : ev.touches[0].clientX;
        }
        function endInteraction(ev) {
            if (!isInSwipe) return;
            isInSwipe = false;
            const endX = ev.type.includes('mouse') ? ev.clientX : ev.changedTouches[0].clientX;
            const deltaX = endX - initialX;
            callback?.(deltaX);
        }

        // 绑定事件
        sliderEl.addEventListener('mousedown', (ev) => {
            startInteraction(ev);
            ev.preventDefault();
        });
        sliderEl.addEventListener('touchstart', startInteraction);
        document.addEventListener('mouseup', endInteraction);
        document.addEventListener('touchend', endInteraction);
    };
}

方案2：抽离公共函数，传参传递状态 #

如果你希望把交互逻辑抽成公共函数复用，可以把状态封装成对象传入函数：

// 抽离的公共交互逻辑
function startInteraction(ev, state) {
    state.isInSwipe = true;
    state.initialX = ev.type.includes('mouse') ? ev.clientX : ev.touches[0].clientX;
}
function endInteraction(ev, state, callback) {
    if (!state.isInSwipe) return;
    state.isInSwipe = false;
    const endX = ev.type.includes('mouse') ? ev.clientX : ev.changedTouches[0].clientX;
    callback?.(endX - state.initialX);
}

// 改造后的工厂函数
function slideInteractions(selector, callback) {
    return function() {
        // 状态封装为对象，方便传递
        const state = {
            initialX: 0,
            isInSwipe: false
        };
        const sliderEl = document.querySelector(selector);

        sliderEl.addEventListener('mousedown', (ev) => {
            startInteraction(ev, state);
            ev.preventDefault();
        });
        sliderEl.addEventListener('touchstart', (ev) => startInteraction(ev, state));
        document.addEventListener('mouseup', (ev) => endInteraction(ev, state, callback));
        document.addEventListener('touchend', (ev) => endInteraction(ev, state, callback));
    };
}

• 缓存DOM查询结果，避免重复调用querySelector损耗性能
• 如果是单页应用场景，建议补充事件解绑逻辑，避免slider销毁时出现内存泄漏
• 可以增加滑动距离阈值判断，避免用户点击误触发滑动回调

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