0

我有这个功能

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 函数。

4

2 回答 2

2

您可以使用辅助函数为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));
    }
    ...
}
于 2012-05-07T18:05:00.067 回答
2

问题是所有回调函数都引用相同的 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));
};

   

于 2012-05-07T18:49:35.423 回答