如何按顺序调用ajax函数？答案

【问题标题】：How to call ajax functions in sequence?如何按顺序调用ajax函数？
【发布时间】：2016-06-30 12:52:49
【问题描述】：

我希望 ajax 函数在没有asynch: false 的情况下一个接一个地执行。因为asynch : false 将浏览器置于挂起模式。我的代码是这样的我有 5 个复选框 ch1、ch2、ch3、ch4、ch5 每个都有一个值作为函数名。用户可以选择任意数量的复选框，但与复选框值关联的 ajax 函数只能一个接一个地执行。让用户选择 ch1、ch5、ch3 所以函数应该像这样执行

f1() -> f3() - >f5();

函数是这样的

function f1(){
    $.ajax({

    });
} 
function f2(){
    $.ajax({

    });
} 
function f3(){
    $.ajax({

    });
}
.
.
so on

我尝试在 ajax 成功方法中调用连续函数，但如果用户选择随机复选框，则会产生问题。

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

我也遇到过类似的情况。
解决方案
首先制作一个选定复选框的数组，其值作为数组元素。然后创建一个检查该值的函数并调用其对应的函数。

 function callRequired(array) {
            var required = array[0];
            if (required === "f1") {
                f1(array);
            }
            if (required === "f2") {
                f2(array);
            }
            if (required === "f3") {
                f3(array);
            }
            if (required === "f4") {
                f4(array);
            }
            if (required === "f5") {
                f5(array);
            }
        }

我们在这里检查第一个元素是否为必需的回调。然后在每次成功后将其删除。只需删除该元素并调用callRequired(array)，方法是删除前一个元素，如下所示

function f1(array) {
        jQuery.ajax({
            url: "some/url",
            success: function (response) {
                array.splice(0, 1);
                callRequired(array);
            }
        });
    }
function f2(array) {
        jQuery.ajax({
            url: "some/url",
            success: function (response) {
                array.splice(0, 1);
                callRequired(array);
            }
        });
    }
function f3(array) {
        jQuery.ajax({
            url: "some/url",
            success: function (response) {
                array.splice(0, 1);
                callRequired(array);
            }
        });
    }
function f4(array) {
        jQuery.ajax({
            url: "some/url",
            success: function (response) {
                array.splice(0, 1);
                callRequired(array);
            }
        });
    }
function f5(array) {
        jQuery.ajax({
            url: "some/url",
            success: function (response) {
                array.splice(0, 1);
                callRequired(array);
            }
        });
    }

希望这可行。谢谢

【讨论】：

【解决方案2】：

你可以使用jQuery.when:

var ajax1 = $.ajax(...);
var ajax2 = $.ajax(...);

//You can pass as much arguments as needed here
$.when(ajax1, ajax2).done(function(){
    alert('All requests complete');
});

请参阅文档以供参考：https://api.jquery.com/jquery.when/

【讨论】：

可以是f1()之后的f2()，也可以是f1()之后的f3()，顺序可以任意。我们不确切知道顺序是什么。
@Krishna ajax 调用是按照您使用 $.ajax 创建 jqXHR 对象的顺序进行的

【解决方案3】：

您可以创建一个通用函数，该函数使用一个通用类调用复选框更改事件，而不是在您还可以在复选框的数据属性中定义一些唯一的 id 并根据该值使用 jquery 属性方法获取它之后，您可以调用 ajax。

【讨论】：

【解决方案4】：

互相调用一个函数，比如：

function f1(){
    $.ajax({
        success: function(){
            f2();
        }
    });
} 
function f2(){
    $.ajax({
        success: function(){
            f3();
        }
    });
}

【讨论】：

"但是如果用户选择随机复选框，这会产生问题。"
没有人知道 f2() 将在 f1() 内部被调用。它是独立的
此选项保留异步，并且在每个success 中您可以执行任何需要的逻辑。正如@CarlosCarucce 所说，您也可以使用jquery.when 来做到这一点

【解决方案5】：

鉴于我没有示例代码，我会这样做。

将每个元素与要调用的函数相关联。比如，一个对象，其键对应于复选框 id，值对应于回调：
通过 jQuery 选择所有复选框，保留顺序
过滤掉未选中的
将获得的复选框列表映射到一个数组，其元素是值（= 回调函数）

你现在应该有类似的东西：

var callbacks = [callback_one, callback_three, callback_four];

理想情况下，“一”、“三”、“四”是对选定复选框的相应回调。然后你保持一个整数值指向当前回调被调用。

最后，您启动了第一个回调。在success 上，增加整数值，如果小于回调列表的长度，则调用下一个回调。

【讨论】：