如何在 JS function 中创建变量闭包？

Question

Assuming multiple sliders can exist on a webpage and they each need their own state of user interactions like touch-start X-position and a boolean of whether it is currently processing a swipe or not..

I'm trying to reuse a piece of code that handles swipe and mouse drag events but each slider should have its own value of initalX and isInSwipe:

   function slideInteractions(selector, callback) {
        return function() {
            let initialX = 0;
            let isInSwipe = false;
            document.querySelector(selector).addEventListener('mousedown', (ev) => {
                startInteraction(ev);
                ev.preventDefault();
            });
            document.querySelector(selector).addEventListener('touchstart', startInteraction);
            document.addEventListener('mouseup', (ev) => {
                endInteraction(ev, callback);
            });
            document.addEventListener('touchend', (ev) => {
                endInteraction(ev, callback);
            });
        };
    }

For each slider on the page I would use it like so, passing the slide container and the callback to call on accepted interaction:

slideInteractions('.project-slides', moveProject)();

I thought that since initialX and isInSwipe are defined in the function being returned then that would create a Closure over them so that each call of slideInteractions() would create its own copy of those variables but it seems that they go out of scope once the function returns.

Is there a way I can fix this keep the variables live on properly within the Closure?

EDIT

The variables are used in startInteraction() and endInteraction() but those functions don't really see those variables at all: they are undeclared within those functions which is where my confusion is because I assume that those functions would have access to the "closed" variables no?

Answer 1

To have the variable shared between the functions, they have to be in the same block scope. So that means you would have to define the startInteraction and endInteraction functions inside the same block as the variables are defined.

function slideInteractions(selector, callback) {
    return function() {

        let initialX = 0;
        let isInSwipe = false;

        function startInteraction(e,) {
          initialX = e.clientX;
        }
        function endInteraction(e, callback) { 
           console.log(initialX, e.clientX);
           if (callback) callback(initialX);
        }

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

Another option is pass around an object. Functions can be outside of the block scope.

function startInteraction(e, data) {
  data.initialX = e.clientX;
}
function endInteraction(e, data, callback) { 
   console.log(data.initialX, e.clientX);
   if (callback) callback(data);
}

function slideInteractions(selector, callback) {
    return function() {

        const data = {
          initialX: 0,
          isInSwipe: false,
        };

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

A better solution is to make a class

 class ClickyThing { initialX = 0 isInSwipe = false constructor(elem, callback) { this.elem = elem; this.callback = callback; this.bindEvents(); } bindEvents() { this.elem.addEventListener('mousedown', (evt) => { evt.preventDefault(); this.startInteraction(evt); }); document.addEventListener('mouseup', (evt) => { this.endInteraction(evt); }); } startInteraction(evt) { this.isInSwipe = true; this.initialX = evt.clientX; } endInteraction(evt) { if (.this;isInSwipe) return. console.log(this,initialX. evt;clientX). if (this.callback) this.callback(this,initialX. evt;clientX). this;isInSwipe = false. } } document.querySelectorAll(".test"),forEach((elem) => { const clickyThing = new ClickyThing(elem. () => console;log('click')); });

 .test { width: 100px; height: 100px; margin: 10px; background-color: #CCC; }

 <div class="test"></div> <div class="test"></div> <div class="test"></div>