在JavaScript中使用闭包

我有这个功能

function createSlidingGallery(){
    gallery_position = parseInt(jQuery(".imageWrapper.default").attr("rel"));
    gallery_position_min = 0;
    gallery_position_max = parseInt(jQuery("#galleryEl .sig_thumb a").size() - 1);
    var galleryWrapper = document.createElement("div");
    galleryWrapper.className = "sGalleryWrapper";
    for (var i = 0; i < gallery_position_max; i++) {
        var slide = document.createElement("div");
        slide.className = "slide slide"+(i);
        slide.setAttribute('rel', i);
        galleryWrapper.appendChild(slide);
    };
    jQuery(".imageWrapper.top").append(galleryWrapper);


//HERE COMES THE PROBLEM PART

    for (var i = 0; i < gallery_position_max; i++) {
        var position = i;

//THE CALLBACK ACTUALLY USES THE SAME CONTEXT FOR ALL PARTICULAR CALLS SO THAT THE POSITION VALUE HOLDS THE MAXIMUM VALUE IN ALL INSTANCES

        loadImage(position, false, function(index){
            console.log(index);
            jQuery(".slide"+position).css({
                'background': 'url('+backgroundImages[index].src+')'
            });

        });
    };
    hideLoadingDC();


}

函数createSlidingGallery（）{
gallery_position=parseInt（jQuery（.imageWrapper.default））.attr（“rel”）；
廊道位置最小值=0；
gallery_position_max=parseInt（jQuery（“#galleryEl.sig_thumb a”）.size（）-1）；
var galleryWrapper=document.createElement（“div”）；
galleryWrapper.className=“sGalleryWrapper”；
对于（变量i=0；i

它应该做的是将图像异步加载到动态创建的元素中。它实际上创建了所有元素，并加载了图像。但是有一个名为loadImage的函数，它用于预加载图像，然后保存这些图像已经加载并可能缓存的信息。我使用回调函数调用它，该函数处理加载的图像并将其设置为相应元素的背景。因此，我需要保存有关元素的信息（如指针或索引/位置）。 现在我尝试将其索引传播到函数，但是因为回调函数在一段时间后调用，所以position变量已经有了其他值（for循环实际上已经通过，并且在回调的所有调用中它都设置为最大值）

---

我知道我可以更改loadImage函数并将位置添加为另一个属性，但我更喜欢任何其他解决方案。我不想更改loadImage函数。

您可以使用助手函数为

位置

变量创建一个新范围：

function makeGalleryCallback(position) {
   return function(index){
         console.log(index);
         jQuery(".slide"+position).css({
                'background': 'url('+backgroundImages[index].src+')'
             });
      };
}

function createSlidingGallery(){
    ...
    for (var i = 0; i < gallery_position_max; i++) {
       loadImage(i, false, makeGalleryCallback(i));
    }
    ...
}

函数makeGalleryCallback（位置）{
返回函数（索引）{
控制台日志（索引）；
jQuery（“.slide”+位置）.css({
'background'：'url（'+backgroundImages[index].src+'）'
});
};
}
函数createSlidingGallery（）{
...
对于（变量i=0；i

您可以使用helper函数为

位置

变量创建一个新范围：

function makeGalleryCallback(position) {
   return function(index){
         console.log(index);
         jQuery(".slide"+position).css({
                'background': 'url('+backgroundImages[index].src+')'
             });
      };
}

function createSlidingGallery(){
    ...
    for (var i = 0; i < gallery_position_max; i++) {
       loadImage(i, false, makeGalleryCallback(i));
    }
    ...
}

函数makeGalleryCallback（位置）{
返回函数（索引）{
控制台日志（索引）；
jQuery（“.slide”+位置）.css({
'background'：'url（'+backgroundImages[index].src+'）'
});
};
}
函数createSlidingGallery（）{
...
对于（变量i=0；i

问题在于所有回调函数都引用相同的i值，而不是在迭代时实际跟踪该值。因此，您需要创建一个新范围（闭包），为i的每个不同值创建一个新引用

可以使用函数在JS中创建新的作用域。您的代码需要使用匿名函数包装，并针对i的每个不同值执行该函数

for (var i = 0; i < gallery_position_max; i++) {
    var position = i;
    loadImage(position, false, (function(index){
      return function(){
        console.log(index);
        jQuery(".slide"+position).css({
            'background': 'url('+backgroundImages[index].src+')'
        });
      };})(i));
};

for（变量i=0；i

---

问题在于所有回调函数都引用相同的i值，而不是在迭代时实际跟踪该值。因此，您需要创建一个新范围（闭包），为i的每个不同值创建一个新引用

可以使用函数在JS中创建新的作用域。您的代码需要使用匿名函数包装，并针对i的每个不同值执行该函数

for (var i = 0; i < gallery_position_max; i++) {
    var position = i;
    loadImage(position, false, (function(index){
      return function(){
        console.log(index);
        jQuery(".slide"+position).css({
            'background': 'url('+backgroundImages[index].src+')'
        });
      };})(i));
};

for（变量i=0；i

---

经典的环中函数/闭包问题。这里至少每天都会问这个问题的一个变体。经典的循环函数/闭包问题。这个问题的一个变体至少每天都会在这里被问到。实际上，这就是我一直在等待的解决方案：）我已经接受了下面的答案，因为它也在工作。Thanks@Sima当前位置您可以更改已接受的答案，您知道，如果您愿意，这就是我一直在等待的解决方案：）我已经接受了下面的答案，因为它也起作用。Thanks@Sima：你知道，如果你愿意，你可以改变被接受的答案