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

Question

我从本网站上的一些答案中了解了 async 函数的行为。但我还是很困惑。我尝试了 2 个 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");
            }
         });
    });
});

Answer 1

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

来源 - http://api.jquery.com/hide/

这就是为什么您的 ajax 请求会先发送，而变量 foo 会稍后更改。希望有帮助。

Answer 2

您的hide 回调将在稍后运行，而不是立即运行，当 jQuery 以默认延迟（400 毫秒）完成隐藏元素时。所以foo 在你开始下面的ajax调用之前不会改变。如果您想等到 foo 更改后开始下面的 ajax 调用，请将该调用放在 hide 回调中。

我的意思是 ajax 语句正在获取 foo 的值，我认为这不应该是因为所有 3 条语句都彼此无关地执行，因为它们是异步的？是否因为STMT1执行速度足够快以使ajax获得价值的巧合而起作用？

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

1. 您安排了ready 回调
2. 一段时间后，ready 回调被触发：
   1. 它为foo (var foo='types: ') 赋值。
   2. 它设置了一个click处理程序
3. 如果您单击该元素，则：
   1. 点击处理程序以默认延迟安排hide
   2. 它使用 foo 的现有值 ("types: ") 启动 ajax 调用。
   3. 大约400ms后，hide的回调运行，将foo的值设置为"YOLO"
4. 如果再次单击该元素，它会执行相同的操作，但这次 foo 的值已经是 "YOLO"，所以这就是 ajax 调用使用的值