延迟后续ajax调用,直到第一个ajax调用完成

时间:2013-01-30 03:32:23

标签: javascript jquery

我在javascript事件的时间方面遇到了一些麻烦。我遇到的问题是代码的一部分似乎在代码的另一部分完成之前执行。我需要确保第一个代码在后一个代码开始之前完成。这是初始代码:

function(){     
    myLoop();  //this needs to complete before the call to myMethod below 
    $.ajax({
    url: sURL + "myController/myMethod",
    success: function() {       
    $.msg("My Success Message",{live:10000});
    error: function(){
    $.msg("My Error Message",{live:10000});
});
}

这是循环并将记录插入db:

的代码
function myLoop(){
$('input[name=c_maybe].c_box').each(function(){
if( $(this).prop('checked') ){ 
    var rn = $(this).prop('value'); 
    $.ajax({
        url: sURL + 'myController/myInsert',
        type:"POST",
        dataType: 'text',
        data: {'rn': rn},
        success: function(data) {
            //not sure what to do on success.
        }
    });
} 
}); 
} 

似乎正在发生的问题是在myController\myMethod完成将所有记录插入数据库之前调用myLoop

有人可以建议我重新设计此代码的方法,这样我才能确保在myController\myMethod完全完成之前不会调用myLoop吗?

感谢。

3 个答案:

答案 0 :(得分:2)

您可以使用已添加到jQuery的$ .when函数。

它是这样的:

   $.when(ajaxFunction1(), ajaxFunction1()).done(function(response1, response2){
    // when the function calls are done this code here will be executed -> the response will be passed as parameters corresponding to the functions -> response1, response2
   });

或者您可以尝试在ajax函数中使用“beforeSend”:

$.ajax({
   beforeSend: function(){    
     alert("doing stuff before the ajax call ...");    
   },
   success: function(){    
    alert("Whoa!");    
   }
 });

答案 1 :(得分:2)

function myLoop() {
   var jqxhrs = [];
   if( $(this).prop('checked') ){ 
       var rn = $(this).prop('value'); 
       jqxhrs.push($.ajax({...
   }
   return jqxhrs;
}

function () {
   $.when.apply(undefined, myLoop()).done(function () {
      $.ajax({
         url: sURL + "myController/myMethod",
         ...
   });
}

$.when.apply用于在ajax请求数组上调用$.when,因此在所有完成之前不会调用.done

答案 2 :(得分:-1)

您可以使ajax调用同步。这样,执行将被阻止,直到ajax调用返回:

$.ajax({
    url: sURL + 'myController/myInsert',
    type:"POST",
    dataType: 'text',
    data: {'rn': rn},
    async: false,
    success: function(data) {
        //not sure what to do on success.
    }
});