讓循環等待ajax調用

Question

在進入下一次迭代之前是否可以讓此循環等待直到AJAX調用完成？

for(curr;curr < total;curr++) { 
    $this.val('Uploading '+(curr+1)+' out of '+total); 
    var tmpStr = JSON.stringify(o[curr]).replace("&", "and"); 
    tmp[0] = JSON.parse(tmpStr); 

    $.ajax({ 
     type: 'POST', 
     url: 'http://example.com/api/post', 
     data: "data="+JSON.stringify(tmp), 
     success: function(msg) { 

      var d = JSON.parse(msg); 
      if (d.success) { 

       //localStorage.removeItem("data"); 
      } 
      else 
      { 
       alert("Data failed to upload, please try again"); 
      } 
     }, 
     error: function(msg) { 
      alert("Data failed to upload, please try again"); 
      $this.val('Upload to CMS'); 
     } 
    }); 
} 

Answer 1

您可以使用帶遞歸功能的when關鍵字。關鍵字when允許您等待ajax調用。在ajax調用之後，當函數將結果發送到完成函數時，即使它失敗了。您可以通過在ajax調用中添加一些錯誤控制來擴展您的場景。但是我給這個例子：

function reCursive(curr,total) 
{ 
    if(curr < total) 
    { 
     $this.val('Uploading '+(curr+1)+' out of '+total); 
     var tmpStr = JSON.stringify(o[curr]).replace("&", "and"); 
     tmp[0] = JSON.parse(tmpStr); 

     $.when(function() 
     { 
      return $.ajax(
      { 
       type: 'POST', 
       url: 'http://mvc.sivapi.sheffieldnetwork.com/form/submit/submit/meadowhallEaster/', 
       data: "data="+JSON.stringify(tmp), 
       success: function(msg) 
       { 
        var d = JSON.parse(msg); 
        if (d.success) 
        { 
         //localStorage.removeItem("data"); 
        } 
        else 
        { 
         alert("Data failed to upload, please try again"); 
        } 
       }, 
       error: function(msg) 
       { 
        alert("Data failed to upload, please try again"); 
        $this.val('Upload to CMS'); 
       } 
      }); 
     }).done(function (x) 
     { 
      //When you get the result from your ajax call. Write your code here. 
      curr++; 
      reCursive(curr, total); 
     }); 
    } 
} 

Answer 2

通過將async: false設置爲請求的一部分，可以使ajax請求同步。這有點挫敗了使用Ajax的目的，但它會讓它像普通的同步代碼一樣運行。

Answer 3

雖然你不能使循環for循環等待，你可以重寫使用調用的另一種風格來運行代碼。

function runOnce(curr) { 
    $this.val('Uploading ' + (curr + 1) + ' out of ' + total); 
    var tmpStr = JSON.stringify(o[curr]).replace("&", "and"); 
    tmp[0] = JSON.parse(tmpStr); 

    $.ajax({ 
    type: 'POST', 
    url: 'http://mvc.sivapi.sheffieldnetwork.com/form/submit/submit/meadowhallEaster/', 
    data: "data=" + JSON.stringify(tmp), 

    // ***ADDED HERE* 
    always: { 
     if (curr < total) { 
     runOnce(curr+1); 
     } else { 
     alert("All done-- you could call your next function from here."); 
     } 
    }, 
    success: function (msg) { 

     var d = JSON.parse(msg); 
     if (d.success) { 
     //localStorage.removeItem("data"); 
     } else { 
     alert("Data failed to upload, please try again"); 
     } 
    }, 
    error: function (msg) { 
     alert("Data failed to upload, please try again"); 
     $this.val('Upload to CMS'); 
    } 
    }); 
} 

// Set things up and run it once. 
// The '0' is what the loop index would be. 
runOnce(0);