$不用彷徨方法withinin每（）循環不持有

Question

在一個下拉列表中選擇，我運行下面的jQuery，我使用的每一個（），以通過li迭代。

我$.get()需要一些時間來從服務器將數據，所以我用裝載IMG通過切換它。但each方法不等到get帶數據，它直接跳到最後。

如何把握這個each直到get從服務器帶來的數據？

JQUERY

jd('#UserId').change(function (e) { 
      var selectedID = jd(this).val();     
      jd('.loading').css("display", "block"); 
      jd(".stats_box li").each(function (index, liElement) { 
       var li_id = liElement.id; 

       /* Request the partial view with .get request. */ 
       jd.get('/Home/_CaseStatus?type=CaseStatus&user_id=' + selectedID, function (data) {      

        jd('#CaseStatus').html(data); 

       }); 
      }); 
      alert("End"); 
      jd('.loading').css("display", "none"); 
     }); 

在上面jQuery的運行，它直接表明我alert &然後將數據一段時間後看到。

Answer 1

您需要等到所有的請求都完成

jd('#UserId').change(function (e) { 
    var selectedID = jd(this).val(); 
    jd('.loading').css("display", "block"); 
    var rqts = []; 
    jd(".stats_box li").each(function (index, liElement) { 
     var li_id = liElement.id; 
     rqts.push(jd.get('/Home/_CaseStatus?type=CaseStatus&user_id=' + selectedID, function (data) { 
      //I've a doubt about the target element 
      jd('#CaseStatus').html(data); 
     })); 
    }); 
    //wait for all requests to complete 
    jd.when.apply(jd, rqts).always(function() { 
     jd('.loading').css("display", "none"); 
    }) 
}); 

---

由於meagar建議，這將是更好地使用.MAP（）

jd('#UserId').change(function (e) { 
    var selectedID = jd(this).val(); 
    jd('.loading').css("display", "block"); 
    var rqts = jd(".stats_box li").map(function (liElement, index) { 
     var li_id = liElement.id; 
     return jd.get('/Home/_CaseStatus?type=CaseStatus&user_id=' + selectedID, function (data) { 
      //I've a doubt about the target element 
      jd('#CaseStatus').html(data); 
     }); 
    }); 
    //wait for all requests to complete 
    jd.when.apply(jd, rqts).always(function() { 
     jd('.loading').css("display", "none"); 
    }) 
}); 

Answer 2

使用$.when在AJAX的循環時間

，等到所有的日Ë請求已完成

見下文

var work_list=[]; 

jd('#UserId').change(function (e) { 
      var selectedID = jd(this).val();     
      jd('.loading').css("display", "block"); 
      jd(".stats_box li").each(function (index, liElement) { 
       var li_id = liElement.id; 
      /* Request the partial view with .get request. */ 
      work_list.push(jd.get('/Home/_CaseStatus?type=CaseStatus&user_id=' + selectedID, function (data) { 
       jd('#CaseStatus').html(data); 

      })); 

     //now it wait for all requests to complete then come in done()     
     jd.when.apply(jd, work_list).done(function() { 
       alert("end"); 
      }); 
     }); 

     jd('.loading').css("display", "none"); 
    });