使用 Ajax 调用顺序运行两个函数

Question

我有两个函数，其中包含ajax calls。

function a(){
    ajaxCall_A();
}
function b(){
    ajaxCall_B();
}

我还有另一个函数，它按照a 然后b 的顺序调用这两个函数。

function c(){
    a();
    b();
    // expectation : function 'b' will get executed only after function 'a' finished it's execution  
}

我不确定它们是否按预期工作。有时会，但有时不会。我认为这是因为它们内部的 ajax 调用是异步的。

如何运行函数“c”中的两个函数以达到预期。

注意：功能如下

function a(){ 
    $.ajax({
        url: "url_a",
        type: "post",
        dataType: "html",               
        cache: false,
        success: function(data){             

        },
        error:function(){             

        }   
    });   
}

function b(){ 
    $.ajax({
        url: "url_b",
        type: "post",
        dataType: "html",               
        cache: false,
        success: function(data){             

        },
        error:function(){             

        }   
    });   
}

Answer 1

由于 ajax 调用是异步的，如果您希望在第一个调用完成之前不启动第二个调用，则需要手动排序 ajax 调用。

Promises 非常适合序列化异步操作，它们可以让它变得非常简单。幸运的是，jQuery 内置了 Promise，并且每个 Ajax 操作都已经返回了一个可以用于此目的的 Promise：

$.ajax(...).then(function(result1) {
    // make 2nd ajax call when the first has completed
    return $.ajax(...);
}).then(function(result2) {
    // success of both ajax calls here
}, function(err) {
    // error here
});

或者，如果你让 a() 和 b() 都从它们的 ajax 调用中返回 jQuery ajax 承诺，那么你可以这样做：

a().then(b);

而且，c() 可能只是：

function c() {
    return a().then(b);
}

因此，如果您想在没有a() 和b() 的情况下进行函数调用以包含这两个Ajax 调用，您应该让它返回一个promise：

function c() {
    return $.ajax(...).then(function(result1) {
        // make 2nd ajax call when the first has completed
        return $.ajax(...);
    })
}

然后，您可以像这样调用c()：

c().then(function(result) {
    // success here
}, function(err) {
    // error here
});

---

这是一个返回 Ajax 承诺的函数示例：

function test() {
    return $.ajax("http://www.test.com/api/test");
}

---

现在，您已经添加了实际的 ajax 代码，您只需添加一个 return：

function a(){ 
    return $.ajax({
        url: "url_a",
        type: "post",
        dataType: "html",               
        cache: false
    });   
}

function b(){ 
    return $.ajax({
        url: "url_b",
        type: "post",
        dataType: "html",               
        cache: false
    });   
}

function c() {
    return a().then(b);
}

Answer 2

确保ajaxCall_A() 和ajaxCall_B() 返回承诺，并将returns 添加到a() 和b()。

function a(){
    return ajaxCall_A();
}
function b(){
    return ajaxCall_B();
}

然后，a() 和 b() 将按如下顺序执行：

function c() {
    a().then(b);
}

您还应该将return 添加到c()，以便它向调用者返回一个承诺。

function c() {
    return a().then(b);
}

Answer 3

只需将 jQuery.when() 和 done() 与 Deferred 一起使用：

    function a() {
        var deferred = $.Deferred();

        $.ajax({
        url: "url_a",
        type: "post",
        dataType: "html",               
        cache: false,
        success: function(data){             
            deferred.resolve(data);
        },
        error:function(){             
           deferred.resolve("Error from a()");
       }   
      });  
      return deferred.promise();
    }
    function b() {
        var deferred = $.Deferred();

        $.ajax({
        url: "url_b",
        type: "post",
        dataType: "html",               
        cache: false,
        success: function(data){             
            deferred.resolve(data);
        },
        error:function(){             
           deferred.resolve("Error from b()");
       }   
      }); 

        return deferred.promise();
    }

    function c()
    {
        $.when(
            a(),
            b()
       )
      .done(function ( v1, v2 ){
      //Do your work - v1 and v2 are resolved value from a() and b() 
      });       
    }

Answer 4

允许a函数接受一个回调参数，完成后执行，并发送b函数作为回调：

function c(){
  a(b); 
}

function a(callback){ 
  $.ajax({
    url: "url_a",
    type: "post",
    dataType: "html",               
    cache: false,
    success: function(data){             
      callback() // Note here call the next function
    },
    error:function(){             

    }   
  });   
}

Answer 5

您需要使用信号量来同步它们

function c(){
    $semaphore=true;
    a();
    while($semaphore ) { 
         setTimeout("checksemaphore()", 500);
    } 
    b();
    // expectation : function 'b' will get executed only after function 'a' finished it's execution  
}


inside the ajax call to a
add a complete: 

complete : function(result) { 
            $waitsemaphore= 0 ; },
error: function(result) {alert("AJAX completed w/error");alert(result);},