未能延時功能，直到後for循環已全面完成

Question

我有到位被拆分大型查詢到管理的小塊，然後用一個簡單的AJAX方法吐出了這一點的工具。 AJAX表單的目的地只是一個將某些表單數據委託給函數的腳本，包括處理哪個「塊」。

<script>     

var passes = Math.ceil($max/$offset); 

for (i = 0; i < passes; i++) 
{ 

    $.ajax({ 
     type: 'POST', url: 'do.php?p=' + i, data: $('#form" . $i . "').serialize(), 
    success: function(data){ 
     $('#update" . $i . "').append(data); 
    } 
    }); 
} 
</script> 

，因爲這可以重複幾次，我一直在尋找爲執行循環何時腳本（即本身的功能）已完成。

由於這不是什麼太時髦，我認爲這將是添加if(i == passes -1) { alert('test');}if(i == passes -1) { alert('test');}到循環的結束，像這樣的一個簡單的例子：

for (i = 0; i < passes; i++) { 

    $.ajax({ 
     type: 'POST', url: 'do.php?p=' + i, data: $('#form" . $i . "').serialize(), 
    success: function(data){ 
     $('#update" . $i . "').append(data); 
    } 
    }); 

    if(i == passes -1) { alert('test');} 

} 

....但它加載這個作爲在頁面加載之前，在循環之前。

同樣，在之後添加一個簡單功能循環也獲得了相同的結果。

我本來以爲（但我在JS挺新鮮的），它會試圖執行的「i」的第二個實例之前完成一個循環，但它似乎並沒有這樣做 - 頁面的行爲像所有請求都會立即發送，完成循環，執行代碼，然後允許「成功」內的函數在自己的時間內回顯。這似乎更加明顯，因爲它有時會在第一次之前追加第二次迭代i的結果。

問題...

1）因爲我已在我如何構成的循環，考慮到目的的錯誤？

2）爲什麼循環似乎在循環之後執行代碼時，它看起來像它仍然會在處理循環本身？

我試圖實現

每個循環應該執行MySQL查詢，回放功能的HTML輸出，然後移動到下一個前打印出來。它確實做到了99％正確，只是偶爾出現的問題並不總是按順序排列。

畢竟循環已經完成，並追加到容器中，我想運行一些代碼來確認操作完成。

許多在此先感謝，希望這是不夠清楚

Answer 1

這是針對您的問題的「承諾」解決方案。

首先，分解每一個進入，做一個工作單元的功能：

function makePass(i) { 
    return $.ajax({ 
     type: 'POST', url: 'do.php?p=' + i, data: $('#form' + i).serialize() 
    }).then(function(data) { 
     $('#update' + i).append(data); 
    }); 
} 

然後你就可以做出一個通用的函數，僞遞歸將調用所提供的功能所需的號碼，主叫每次用當前通號它，最後返回一個新的「解決」的承諾一次通已經完成：

function makeNPasses(f, n) { 
    var i = 0; 
    return (function loop() { 
     if (i < n) { 
      return f(i++).then(loop); 
     } else { 
      return Promise.resolve(); 
     } 
    })(); 
} 

然後，您可以註冊一個處理程序，一旦一切都做，要調用：

var passes = Math.ceil($max/$offset); 

makeNPasses(makePass, passes).then(function() { 
    console.log("All done!"); 
}); 

Answer 2

發出Ajax請求同步：

所有Ajax請求：

$.ajaxSetup({ async: false }); 

個人：

$.ajax({ 
    async: false, 
    ......... 
}); 

Answer 3

的Javascript有一個異步流程。它不會等待上述請求獲取da ta從某個地方......相反，它只是連續發射聲明。

爲了避免這種情況，有3個選項。

1. 理想的方法是使1個單HTTP請求到服務器，並獲得在JSON陣列的形式的所有數據。這將更加高效，簡單和省時，並遵循最佳實踐。

2. 進行ajax的異步調用。你會在這個答案jQuery ajax success anonymous function scope得到有關它的好信息。但是，再次推薦回調，不要做異步錯誤。相反，.when()或.then()更容易..因爲最終他們也是回調。

3. 遞歸函數可以幫助你完成這樣的任務。這是一種骯髒的方法，因爲ES5不允許使用遞歸函數進行更深入的迭代。但ES6確實允許它進行10000次迭代。但它不是一個好方法。它增加了開銷和瓶頸你的頁面加載。

Answer 4

AJAX調用是異步的，因此它們不能用在循環結束之前成功（如JavaScript是非阻塞）。事實上你所想要做的是AJAX調用後，不只是循環（這是同步）後進行動作，所以我會或者使用承諾或鏈接或聚合成功的事件，如以下建議：

var passes = Math.ceil($max/$offset); 
for (i = 0; i < passes; i++) { 
    $.ajax({ 
     type: 'POST', 
     url: 'do.php?p=' + i, 
     data: $('#form' + i).serialize(), 
     success: function(data){ 
      $('#update' + i).append(data); 
      resolve(); 
     }, 
     error: reject 
    }); 
} 

var resolved = 0; 
function resolve() { 
    if(++resolved >= passes) { 
     alert('test'); 
    } 
} 

function reject() { 
    alert('One of AJAX requests failed'); 
}