Question

我最近注意到了我的代码的以下行为。

    function abc(){
        a();
        b();
        c();
    }
    function a(){
        // ajax call
        $("#number").val("a");
        // ajax call finished
    }
    function b(){
        // ajax call
        $("#number").val("b");
        // ajax call finished 
    }
    function c(){
        alert($("#number").val());
        // ajax call
        $("#number").val("c");
        // ajax call finished
    }

HTML代码

<input id="number"  value=""  type="hidden"/>

<button type="submit" id="mySubmit" onClick="abc()">Search</button>

我想当我调用函数abc()时，首先执行a()然后执行b()然后c()

但在我看来alert中的c()是在b()完成之前执行的，因为它会将a显示为警告框结果。

但是，如果代码如下所示，它按预期工作，（警报显示b）

    function abc(){
        a();
        b();
        c();
    }
    function a(){
        $("#number").val("a");
    }
    function b(){
        $("#number").val("b");
    }
    function c(){
        alert($("#number").val());
        $("#number").val("c");
    }

为什么会这样？第一个代码中的那些ajax调用是否与此有关？

注意：抱歉，我无法在小提琴中重现这个问题。有这种经验并且知道原因的人可以帮助我。

我也发布了this SO question。这些答案与这种行为相矛盾。

Answer 1

这是Ajax调用的本质。当您进行异步调用时，一旦调用初始化，它们将被视为“已完成”，而不是在调用完成时。因此，它会继续前进，而不是等待。

如果您想按此顺序拨打电话，可以执行以下操作：

在调用a（）时调用b（）和c（）回调 - 这意味着你等到a（）完成并且在调用的.done（）部分，你可以调用其他函数
如果您正在使用jQuery，则可以指定您希望调用不是异步的（async：false） - 有关详细信息，请参阅此处：http://api.jquery.com/jquery.ajax/

Answer 2

您的函数将按顺序调用（）b（）和c（），但是您无法处理每个ajax调用的响应顺序，因此出于这个原因，它们看起来可能未排序。

使用ajax的JavaScript函数不会一个接一个地执行？

2 个答案: