通过 Javascript/jQuery 的 Ajax HEAD 请求

2022-01-17 00:00:00 http-headers jquery javascript ajax

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

I seem to be having some issues with making HEAD requests, and preserving the integrity of data in an array.

鉴于此片段:

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，我使用了这个片段:

I capture the URLs of all background-images on a given page. Now, trying to grab the size of each image via HEAD requests for Content-Length, I use this snippet:

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

However, when I dump imageData via console.log, I each element (which should be an array containing the URL and the content-length) ends up as [undefined, XXXX] where XXXX is always the size of the last requested Content-Length

我很困惑，尽管这似乎是一个时间/范围问题.我这里发生了某种竞争情况吗?

I'm stumped, though it appears to be a timing/scoping issue. Do I have a sort of race-condition occuring here?

推荐答案

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

The problem is that the single variables i and ajaxSizeRequest being captured by the callback function are the same variables for all instances of the callback function. I think if you call a function and pass the index variable to it and, at the same time, scope the request variable locally to the function itself use the response parameter of the done handler, you should end up with independent variables captured by the callback. It should then reference each array element and each response variable correctly.

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

相关文章