加載圖像檢查他們使用jQuery不工作

Question

存在時，我有這個功能是應該檢查圖像是否存在長達他們停止顯示，根據他們的標題點：

function LoadPictures(){ 
     const PIC_MAX = 12; 

     var i = 1; 

     while (i <= PIC_MAX){ 
      $.ajax({url: "pic" + i + ".jpg", 
       type: "HEAD", 
       success: function(){ 
        $("body").append("<img src='pic" + i + ".jpg' />"); 
       }, 
       error: function(){ 
        i = PIC_MAX + 1; 
       } 
      }); 

      i++; 
     } 
    } 

而且但是，當我運行該功能時，我所得到的都是空白框。我知道該循環根據出現的盒子數量正確計數現有圖像，但未能加載它們。這是爲什麼？

Answer 1

這是因爲回調是異步的，所以i的值很可能是每次回調執行時循環中的最後一個值。請看下面的例子（DEMO）：

var length = 10; 
var url = window.location; 
for (i=0 ; i<length ; i++) { 
    $.get(url, function(result) { 
     console.log(i); 
    }); 
} 

這裏，值記錄爲i不會是1到10，因爲i是繼續在服務器發送一個響應以獲取更新的一個局部變量。

---

你可以使用一種叫做「柯里」的技術來解決這個問題。裹在另一個函數的回調函數，通過在i立即（DEMO）的當前值：

success: (function(i){ 
    return function() { 
     $("body").append("<img src='pic" + i + ".jpg' />"); 
    } 
})(i),