enquire.js-如何在動態創建的寄存器函數中維護變量？

Question

我正在遍歷包含多個元素的對象，每個對象包含多個媒體查詢。

在循環中，我正在動態調用enquire.js .register()在比賽中執行某些操作。 此操作最初有效，但在循環之外，並且在調整瀏覽器大小后，匹配不再起作用，因為循環中使用的變量已從循環中增加到最高值。

用代碼解釋可能更容易！

這是images對象：

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"
         }
      ]
   }
];

這是循環：

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]是未定義的，因為x = 3 。 如何使x和y等於將來match es中最初傳遞的值？

Answer 1

可變范圍在功能級別上維護。 因此，您必須找到一種在每次迭代時創建變量副本並將該副本傳遞給注冊函數的方法。

一種實現方法是創建一個立即執行的函數表達式，該表達式返回最終將由register()執行的函數。

它看起來像這樣：

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

這種工作方式是立即執行的函數表達式為其返回的函數創建一個閉包，該閉包引用了x和y副本-innerX和innerY。

Answer 2

很棒的@WickyNilliams教給我有關閉包的知識，並提供了以下工作代碼：

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);

可以在這里找到一支工作筆： http : //codepen.io/WickyNilliams/pen/ckEeD