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

Run two functions with Ajax calls sequentially

本文关键字：两个 函数 Ajax 调用 顺序 运行      更新时间：2023-09-26

我有两个函数里面有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(){             
        }   
    });   
}

因为ajax调用是异步的，所以如果您希望第二个ajax调用在第一个调用完成后才启动，则需要手动对ajax调用进行排序。

promise是唯一适合于序列化异步操作的，它们可以使它变得非常简单。幸运的是，jQuery内置了承诺，并且每个Ajax操作都已经返回了一个承诺，可以用于此:

$.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);
}
所以，如果你想让一个函数调用包含这两个Ajax调用没有a()和b()，你应该让它返回一个承诺: 
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代码，您可以添加返回: 
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);
}

确保ajaxCall_A()和ajaxCall_B()返回承诺，并在a()和b()上添加return s 

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);
}

直接使用jQuery.when() &done() with 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() 
      });       
    }

允许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(){             
    }   
  });   
}

您需要使用信号量

同步它们。
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);},
相关文章：