通过Javascript / jQuery的Ajax HEAD请求

Question

我似乎在发出HEAD请求以及保持数组中数据完整性方面遇到一些问题。

给出以下代码段：

var imageTemp = Array();

$('*')
    .each(function(index){
        if($(this).css('background-image') != 'none'){
            imageTemp.push($(this).css('background-image').slice(5, -2));
        }
    });

我捕获给定页面上所有背景图像的URL。现在，尝试通过HEAD请求获取每个图像的大小Content-Length，我使用以下代码段：

var imageData = Array();

for(var i = 0; i < imageTemp.length; i++){
    ajaxSizeRequest = $.ajax({
        type: "HEAD",
        async: true,
        url: imageTemp[i],
        success: function(message){
            imageData.push([imageTemp[i], ajaxSizeRequest.getResponseHeader('Content-Length')]);
        }
    });
}

但是，当我imageData通过via 转储时console.log，每个元素（应该是包含URL和content-
length的数组）最终都以上次请求的大小始终在[undefined, XXXX]哪里XXXX``Content-Length

我很困惑，尽管这似乎是一个时间/范围问题。我这里有某种竞赛条件吗？

Answer 1

问题在于，对于回调函数的所有实例，单个变量i和ajaxSizeRequest被回调函数捕获的变量都是相同的。我认为，如果您调用一个函数并将索引变量传递给它，同时使用完成的处理程序的响应参数
在本地将请求变量范围限定到该函数本身 ，则应该以回调捕获的自变量结束。然后，它应正确引用每个数组元素和每个响应变量。

var imageData = Array();

for(var i = 0; i < imageTemp.length; i++){
    updateImageData( i );
}

function updateImageData( i )
    $.ajax({
        type: "HEAD",
        async: true,
        url: imageTemp[i],
    }).done(function(message,text,jqXHR){
        imageData.push([imageTemp[i], jqXHR.getResponseHeader('Content-Length')]);
    });
}