如何使用循环多次（同步）调用相同的异步函数？

Question

我有一个名为“products”的数组，该数组在每次页面加载时都会有所不同。然后，我需要调用函数“addProduct()”的次数与“products”一样多，并使用该函数内每个索引的更改值。该函数很复杂并且使用异步调用（如 .get）在 addProduct() 执行完成之前，如何阻止 for 循环进入下一次迭代？

 function addProduct(productVariable){

      // (...do some long and asynchronous things with productVariable...)
 }

 //products array can vary in length on each page load
 products = ["prod01","prod02","prod03","prod04","prod05",...];

 for (var i = 0; i < products.length; i++) {

      var productAlter = product[i];

      //(...do some things with productAlter, but wait 
      // until the previous loop's addProduct() function 
      // has completed successfully)

      addProduct(productAlter);
 }

我一直在阅读有关回调和承诺的信息，但无论何时放置它们，该函数似乎都是异步触发的。任何帮助表示赞赏！

Answer 1

将利用成功回调让 Ajax 调用addNextProdut，如果索引达到最大值，它将停止。

function addProduct(productVariable){
  $.ajax({
   url: your_action_server_url,
   context: document.body,
   success: function(){
     addNextProduct()
   }
   })
 }

 function addNextProduct(){
    index++; 
    if(index < products.length)
      addProduct(products[index])
 } 

 products = ["prod01","prod02","prod03","prod04","prod05",...];
 index = 0;
 addProduct(products[index])