javascript - 在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();


}

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

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

最佳答案

您可以使用辅助函数为position变量创建新作用域：

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

关于javascript - 在JavaScript中使用闭包，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10486800/