jQuery Ajax等待每個函數

Question

$xy('#simpan').click(function() { 

    $xy('input[id="cekbok[]"]:checked').each(function() { 

    var data = (this.value); 
    var div = (this.value); 
    var str = window.location.href; 
    var res = str.replace("wp-admin/options-general.php?page=katalogu-options", "/wp-content/plugins/katalog/includes/img/loading.gif"); 
    var loading = ('<img src="'+res+'">') ; 


    $xy.ajax({ 
     type : 'POST', 
     url : '../wp-content/plugins/katalogunique/proses2.php',   
     data: { 
      id : (this.value) 
     }, 

     success:function (data) { 
      $xy('#result'+div).empty(); 
      $xy('#result'+div).append(data); 
      $xy('#tz'+div).remove(); 
     }   

    }); 

    }); 
}); 

我的函數在循環中將複選框值發送到proses2.php，但是當我運行此腳本時，它將立即運行所有ajax POST調用。我想要一個接一個地運行ajax請求，或者等到完成後，我該如何解決這個問題？

Answer 1

這裏是一個沒有遞歸，並使用一個簡單的循環方式：

$xy('#simpan').click(function() { 

    var url = '../wp-content/plugins/katalogunique/proses2.php'; 
    var d = $.Deferred().resolve(); // empty promise 
    $xy('input[id="cekbok[]"]:checked').each(function() { 
     var div = this.value; 
     d = d.then(function(data){ 
      $xy('#result'+div).empty().append(data); 
      $xy('#tz'+div).remove(); 
      return $xy.post(url, {id: div}); // this will make the next request wait 
     }); 
    }); 
    // can d.then here for knowing when all of the requests are done. 
}); 

注意：我可以「巧妙地將它」與.reduce縮短行數從6到4，但老實說，我寧願保持循環構造OP是舒適的。這是因爲承諾鏈接 - 基本上，當你從then返回一個動作時，它會等待它，然後執行你要鏈接的下一個then。

讓我們examplify：

function log(msg){ // simple function to log stuff 
 
    document.body.innerHTML += msg + "<br />"; 
 
} 
 

 
var delay = function(ms){ // this is an async request, simulating your AJAX 
 
    var d = $.Deferred(); 
 
    setTimeout(d.resolve, ms); // resolving a deferred makes its then handlers execute 
 
    return d; 
 
}; 
 

 
// $.Deferred.resolve() starts a new chain so handlers execute 
 
var p = $.Deferred().resolve().then(function(){ 
 
    log("1"); 
 
    return delay(1000); // like in your code, we're waiting for it when we chain 
 
}).then(function(){ // in the above code, this is the d = d.then part, 
 
    log("2"); // this only runs when the above delay completes 
 
    return delay(1000); 
 
}); 
 

 
// and more like in the above example, we can chain it with a loop: 
 
[3,4,5,6,7,8,9,10].forEach(function(i){ 
 
    p = p.then(function(){ 
 
     log(i); 
 
     return delay(1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

注意，這樣做$xy('#result'+div)可能是一個糟糕的主意，因爲你查詢你的視圖層爲你放了什麼事 - 考慮保持有關格作一個數組，並保持引用，而不是:)

Answer 2

你可以使用一個遞歸函數這樣做的所有電話一個接一個：

$xy('#simpan').click(function() { 
    var str = window.location.href; 
    var i=0; things = $xy('input[id="cekbok[]"]:checked'); 
    (function doOneTask(){ 
     if (i++>=things.length) return; 
     var thing = things[i]; 
     var data = thing.value; 
     var div = thing.value; 
     var res = str.replace("wp-admin/options-general.php?page=katalogu-options", "/wp-content/plugins/katalog/includes/img/loading.gif"); 
     var loading = ('<img src="'+res+'">') ; 
     $xy.ajax({ 
      type : 'POST', 
      url : '../wp-content/plugins/katalogunique/proses2.php',   
      data: { 
       id : thing.value 
      }, 
      success:function (data) { 
       $xy('#result'+div).empty(); 
       $xy('#result'+div).append(data); 
       $xy('#tz'+div).remove(); 
      }   
     }).always(doOneTask); 
    })(); 
}); 

注意：如果你想停在第一個失敗，而不是做下一個電話，我請用done替換always。

Answer 3

一種方法是使用遞歸函數，每次將列表（減去第一個條目）傳遞回去。

例如調用代碼被減少到了這一點：

$xy('#simpan').click(function() { 
    LoadAjax($xy('input[id="cekbok[]"]:checked')); 

}); 

和LoadAjax是遞歸這樣的：

function LoadAjax(elements) { 
    // Exit when done 
    if (!elements.length) return; 
    var $this = elements.first(); 
    var data = ($this.value); 
    var div = ($this.value); 
    var str = window.location.href; 
    var res = str.replace("wp-admin/options-general.php?page=katalogu-options", "/wp-content/plugins/katalog/includes/img/loading.gif"); 
    var loading = ('<img src="' + res + '">'); 

    $xy.ajax({ 
     type: 'POST', 
     url: '../wp-content/plugins/katalogunique/proses2.php', 
     data: { 
      id: ($this.value) 
     }, 

     success: function (data) { 
      $xy('#result' + div).empty(); 
      $xy('#result' + div).append(data); 
      $xy('#tz' + div).remove(); 
      // Go recursive with the rest of the list 
      LoadAjax(elements.slice(1)); 
     } 

    }); 
}