Javascript 为什么下面的异步函数异常工作？

我已经从本网站的一些答案中了解了

async

函数的行为。但我还是很困惑。我尝试了两条jQuery语句，其中STMT1与ajax调用“协作”，而STMT2则没有。我的意思是，

ajax

语句无法获取所需的数据

为什么会这样？STMT1的执行速度是否略快于STMT2

编辑：所谓行为，我的意思是

async

语句一起执行，它们是非阻塞的。所以我的两种说法都不起作用？但其中仍然有一个在工作。为什么会这样

$(document).ready(function(){
    var foo='types: ';
    $("button").click(function(){
        //STMT1

        // $("p").each(function(){
        //  foo=foo+$(this).text();
        // });

        //STMT2

        $("p").hide(function(){
            foo="YOLO";
        });
        $.ajax({
            url: 'api.php',
            type: 'post',
            data: 'name='+foo,
            success: function(result){
                console.log(result);
            },
            error: function(){
                console.log("Couldn't make request");
            }
         });
    });
});

---

当jQuery以默认延迟（400ms）完成隐藏元素时，

hide

回调将在以后运行，而不是立即运行。因此，在开始下面的ajax调用之前，不会更改

foo

。如果您想等到

foo

更改为开始以下ajax调用，请将该调用放入

hide

回调中

我的意思是ajax语句得到了foo的值，我认为这不应该，因为所有3条语句都是异步的，因此它们的执行都是无关的？STMT1的执行速度是否足够快，以至于ajax能够获得值

不，这根本不是巧合。您的四个异步调用不是并行运行的，只有两个是并行运行的。下面是代码中发生的情况：

您计划了一个

ready

回调

一段时间后，

ready

回调被触发：

它为

foo

（

var foo='types:'

）赋值

它设置一个

单击
处理程序

如果单击元素，则：

单击处理程序使用默认延迟安排

隐藏

它使用

foo

的现有值（

“类型：”

）启动ajax调用

大约400毫秒后，运行

hide

的回调，将

foo

的值设置为

“YOLO”

如果您再次单击该元素，它会执行相同的操作，但是这次

foo

的值已经是

“YOLO”

，所以ajax调用使用的就是这个值

---

jquery动画是异步方法，隐藏方法的默认持续时间为400ms

来源-

---

这就是为什么ajax请求先执行，变量foo随后更改的原因。希望有帮助。

不清楚你在问什么。你看到了什么行为？你期待什么样的行为？我编辑了细节，现在还不清楚。什么是你不希望工作的“工作”？什么不起作用（这显然是你所期望的）？我的意思是

ajax

语句得到了

foo

的值，我认为这不应该，因为这3条语句都是异步的，因此执行时彼此无关？STMT1的执行速度是否足够快，以便ajax获得值？当连接速度慢或出现其他问题时，我是否有可能无法从STMT1获得值，因为

ajax

没有等待它？请回复我的评论。我的疑问是ajax如何获得STMT1的价值？ajax语句是否等待STMT1？还是他们一起执行？我的意思是当ajax只有STMT1可用时。@VikasKumar:ajax调用不会等待

hide

回调，当然不会。它会等待

hide

（启动隐藏过程，但不会完成）的调用完成。对不起，我的意思是如果没有hide函数。我说的是第一个语句和ajax调用。它们是如何工作的？我知道结果了，让我们看看。