Ajax HEAD通过Javascript / jQuery请求

我似乎在制作HEAD请求时遇到了一些问题,并保留了数组中数据的完整性.

鉴于此片段：

var imageTemp = Array();

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

我捕获给定页面上所有背景图像的URL.现在,尝试通过HEAD请求内容长度来获取每个图像的大小,我使用此代码段：

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')]);
        }
    });
}

但是,当我通过console.log转储imageData时,我的每个元素(应该是包含URL和内容长度的数组)最终为[undefined,XXXX],其中XXXX始终是最后请求的Content-Length的大小

我很难过,虽然这似乎是一个时间/范围问题.我在这里遇到过某种竞争条件吗？

解决方法:

问题是回调函数捕获的单个变量i和ajaxSizeRequest对于回调函数的所有实例都是相同的变量.我想如果你调用一个函数并将索引变量传递给它,同时将请求变量本地范围扩展到函数本身使用done处理程序的响应参数,你最终应该得到回调捕获的独立变量.然后它应该正确引用每个数组元素和每个响应变量.

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')]);
    });
}