enquire.js-如何在动态创建的寄存器函数中维护变量？

Question

I'm looping through an object containing multiple elements, with each containing multiple media queries.

In the loop, I'm dynamically calling enquire.js .register() to perform something on the match. This works initially, but outside of the loop, and upon resizing the browser, the matches no longer work, as the variables used in the loop have been incremented to their hightest value from the loop.

It's probably easier to explain in code!

Here's the images object:

var images = [
   {
      "selector":"[data-id=\"0\"]",
      "breakpoints":[
         {
            "mediaquery":"(max-width: 31.25em) ",
            "src":"image-0-small.jpg"
         },
         {
            "mediaquery":"(min-width: 31.3125em) and (max-width: 46.25em) ",
            "src":"image-0-medium.jpg"
         },
         {
            "mediaquery":"(min-width: 46.3125em) ",
            "src":"image-0-large.jpg"
         }
      ]
   },
   {
      "selector":"[data-id=\"1\"]",
      "breakpoints":[
         {
            "mediaquery":"(max-width: 31.25em) ",
            "src":"image-1-small.jpg"
         },
         {
            "mediaquery":"(min-width: 31.3125em) and (max-width: 46.25em) ",
            "src":"image-1-medium.jpg"
         },
         {
            "mediaquery":"(min-width: 46.3125em) ",
            "src":"image-1-large.jpg"
         }
      ]
   },
   {
      "selector":"[data-id=\"2\"]",
      "breakpoints":[
         {
            "mediaquery":"(max-width: 31.25em) ",
            "src":"image-2-small.jpg"
         },
         {
            "mediaquery":"(min-width: 31.3125em) and (max-width: 46.25em) ",
            "src":"image-2-medium.jpg"
         },
         {
            "mediaquery":"(min-width: 46.3125em) ",
            "src":"image-2-large.jpg"
         }
      ]
   }
];

And here's the loop:

for (var x=0; x < images.length; x++) {
  for (var y=0; y < images[x]['breakpoints'].length; y++) {
    enquire.register(images[x]['breakpoints'][y]['mediaquery'], function () {
      // x and y unfortuntaley equal 3 & 3 after the loop, so how do I maintain them from inside the match?
      // Interestingly, Firefox doesn't seem attempt to fire matches more than once. Chrome and IE 11 do, which is where I found the error that images[x] is undefined

      console.log('match-index', x, y);
      console.log('match-images', images);
      console.log('match-mediaquery', images[x]['breakpoints'][y]['mediaquery']);
    });
  }
}

images[x] is undefined because x = 3 . How do I keep x and y to equal what was originally passed in on future match es?

Answer 1

Variable scope is maintained at the function level. So you have to find a way to create a copy of the variables at each iteration and pass that copy to the registration function.

One way to do that is to create an immediately-executing function expression that returns the function that will eventually be executed by register() .

It would look something like this:

(function(innerX, innerY) {
    return function() {
        // use innerX and innerY here
    };
}(x, y))

The way this works is that the immediately-executing function expression creates a closure for the function that it returns, which has a reference to the x and y copies - innerX and innerY.

Answer 2

The marvellous @WickyNilliams taught me about closures and provided the following working code:

function registerWithEnquire(x, y) {
    enquire.register(swapImages[x]['breakpoints'][y]['mediaquery'], function () {
        // I want to set the src of the relevant cloned image to its corresponding src property in the swapImages object with:

        //document.querySelector(swapImages[x]['selector']).src = swapImages[x]['breakpoints'][y]['src'];

        // x and y unfortuntaley equal 5 & 3 after the loop, so how do I maintain them from inside the match?

        // Interestingly, Firefox doesn't seem attempt to fire matches more than once. Chrome and IE 11 do, which is where I found the error that swapImages[x] is undefined

        console.log('match-index', x, y);
        console.log('match-swapImages', swapImages);
        console.log('match-mediiquery', swapImages[x]['breakpoints'][y]['mediaquery']);

    });
}

for (var x=0; x < swapImages.length; x++) {
    console.group(x);
    console.log(swapImages[x]['selector']);

    for (var y=0; y < swapImages[x]['breakpoints'].length; y++) {
        console.log(swapImages[x]['breakpoints'][y]['mediaquery']);

        registerWithEnquire(x, y);
    }

    console.groupEnd();
}
console.log(x, y);

A working pen can be found here: http://codepen.io/WickyNilliams/pen/ckEeD