依次使用Ajax调用运行两个函数 [英] Run two functions with Ajax calls sequentially

问题描述

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

I have two functions which has ajax calls inside them.

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

我还有另一个函数，它以<$的顺序调用这两个函数c $ c> a 然后 b 。

And I have another function which calls these two functions in the order of a then b.

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

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

I'm not sure whether they are working as I expected or not. Some time it will do but some times it is not. I assume it's because the ajax calls , which are asynchronous , inside them.

如何运行函数'c'中的两个函数来实现期望。

How can I run the two functions in function 'c' to achieve the expectation.

注意：功能如下所示

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调用进行排序。

Because the ajax calls are asynchronous, you will need to manually sequence the ajax calls if you want the second one not to start until the first one is done.

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

Promises are uniquely suited for serializing asynchronous operations and they can make it quite simple. Fortunately, jQuery has promises built in and every Ajax operation already returns a promise that can be used for this:

$.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承诺，然后你可以这样做：

Or, if you make a() and b() both return the jQuery ajax promises from their ajax calls, then you can just do this:

a().then(b);

而且， c（）可能只是：

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

因此，如果要进行函数调用以包含这两个Ajax调用没有 a（）和 b（），你应该让它返回一个承诺：

So, if you want to make a function call to contain both these Ajax calls without a() and b(), you should have it return a promise:

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

然后，你可以像这样打电话给 c（）：

And, you can then call c() like this:

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

---

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

---

Here's an example of a function that returns an Ajax promise:

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

---

现在，你呢'我添加了你的实际ajax代码，你只需添加一个回报：

---

Now, that you've added your actual ajax code, you can just add a 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);
}

这篇关于依次使用Ajax调用运行两个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！