Ajax HEAD通过Javascript/jQuery请求

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通过console.log,我的每个元素(这应该是包含URL和内容长度的数组)最终成为[undefined, XXXX]其中XXXX总是最后的请求的大小Content-Length

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

Answer 1

问题是回调函数捕获的单个变量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')]);
    });
}