javascript - $.post 后的警报显示不同的数据

Question

看这段代码:

<input type="hidden" id="finalvalue" value="2" />

<script>
    $.post("/increment_in_one", { param: 2 }, function (data) {
        alert( data ); // this shows: 3
        $("#finalvalue").val( data );
        alert( $("#finalvalue").val() ); // this shows 3
    });

    alert( $("#finalvalue").val() );   // this shows 2
</script>

为什么最后一个警报显示 2？

Answer 1

因为代码并不像您期望的那样同步运行。 $.post 调用“在后台”异步执行。一旦您调用 $.post，网络浏览器将生成一个新线程来完成所有任务，当前线程立即继续执行该函数的剩余部分，即 alert( ) 显示 2。新的后台线程依次连接网络服务器，触发 HTTP POST，最后调用回调函数。它比初始线程调用 alert() 需要花费更多的时间。这就是为什么你看到了差异。

在这个特定的代码示例中，您应该已经注意到 2 在 3 之前被警告。尝试在警报中添加更多明智的信息，例如

alert('Inside $.post callback: ' + $("#finalvalue").val());

和

alert('At end of function: ' + $("#finalvalue").val());

总而言之，如果您想根据新数据做一些事情，那么代码应该放在回调函数中。