.html() 在异步代码中不起作用

Question

我有一些类似这样的代码：

function myFunction(){
    $('#somediv').html("Making request...");
    $.get('/script.php',
        function(data){
            if(data.error == 0){
                $('#somediv').html("yay!");
            } else {
                $('#somediv').html("oops!");
                window.setTimeout(myFunction(), 2000);
            }
        },
        'json'); 
}

“哎呀！”从不显示，我相信可能是因为 $.get() 请求被异步调用。我可以让它显示的唯一方法是将它包装在一个 window.setTimeout() 或在它之前运行一个 alert()。

Answer 1

用途：

window.setTimeout(myFunction, 2000);

而不是

window.setTimeout(myFunction(), 2000)

window.setTimeout(myFunction(), 2000); 调用 myFunction() 并且它与：window.setTimeout(undefined, 2000) 相同，因为 myFunction() 返回 undefined。

但是当 myFunction 被调用时，你会使用 $('#somediv').html("Making request..."); 重写 html。

Answer 2

逐行跟踪你的代码，你就会明白发生了什么。

function myFunction(){
    $('#somediv').html("Making request...");
    $.get('/script.php',
        function(data){
            if(data.error == 0){
                $('#somediv').html("yay!");
            } else {
                $('#somediv').html("oops!");
                myFunction();
            }
        },
        'json'); 
}

1. $('#somediv').html("Making request...");
2. $.get()
3. // waiting for ajax request...
4. $('#somediv').html("oops!");
5. $('#somediv').html("Making request...");

第 4 步和第 5 步最有可能在 0.01 毫秒内发生，这就是为什么您永远不会看到“哎呀！”。

您可以在 myfunction 周围使用 settimeout 来使 oops 可见，但最好不要显示任何内容，以便它继续说“正在发出请求...”。