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

但是，當我通過console.log轉儲imageData時，我的每個元素（應該是包含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')]);
    });
}

Answer 2

看起來你的i正確封閉

另外，你不能使用ajaxSizeRequest因為它也只指向一個請求（可能是最后一個，因為循環執行速度非常快）

只需將您的success回調函數包裝如下，更改對ajaxSizeRequest的引用：

success: (function(i){
   return function(data,status,xhr){
     imageData.push([imageTemp[i], xhr.getResponseHeader('Content-Length')]);
   };
})(i)

Answer 3

您可以這樣做我喜歡的范圍：

success: function(i){
    return function(message){
        imageData.push([imageTemp[i], ajaxSizeRequest.getResponseHeader('Content-Length')]);
    }
}(i)

Answer 4

如果有人仍然遇到這個問題，並且由於這篇帖子已經有5年之久了，這里的答案就更加“現代”了：只需在原始帖子中使用let而不是var for循環。

信息： 有沒有理由在ES6中使用“var”關鍵字？ 和： MDN - 讓語法

Answer 5

你有一個i變量，它由所有回調共享。
由於AJAX是異步的，所以所有回調都在循環結束后運行，並且它們都得到相同的i 。

要解決此問題，您需要將AJAX調用移動到一個單獨的函數中，該函數將i作為參數。
因此，每個回調將獲得一個單獨的i參數。