JQuery工作得太快了 - JQuery works too fast?

我对JQuery很陌生，我的代码有一个小问题。我希望你们中的任何一个人都能帮我。

我使用外部PHP文件将某些HTML数据加载到主文件中。现在有另一个外部PHP文件更新相同的数据。我使用JQuery函数来检查我想要更新的字段的值，如果它不是空的，我调用更新文件。就在我重新加载我正在工作的DIV并将新数据发布到它之后(使用外部加载数据文件)。

现在的问题是，我相信我的JQuery函数/有时/不等待更新文件完成，并立即从第二个文件读取新内容，而不等待内容得到实际更新。这种情况偶尔会发生，但不是经常发生。

这是我的JQuery函数:

$("#updateAdminMessage").live("click", function() {
        if($("#adminMessage").val() != ""){
            $.post("/includes/script_files/updateAdminMessage.php", { adminMessage: $("#adminMessage").val() } )
            $("#div_adminMessage").hide();
            $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
            $("#div_adminMessage").fadeIn();
        }
        else{
            alert('do not leave this field blank');
        }
    });

如果您想知道，读取文件只是在从数据库中读取所需数据后打印一些HTML代码，而更新文件则更新相同的数据。

我的JQuery代码有什么问题吗?因为老实说，我相信我的PHP阅读&更新文件工作得很好

问题是post是一个异步操作，因此它将立即执行并返回，而在等待该请求完成时，load函数将被执行。

正确的方法是使用回调:

$.post("/includes/script_files/updateAdminMessage.php", { 
    adminMessage:    $("#adminMessage").val() }, 
    function(){
        $("#div_adminMessage").hide();
        $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
        $("#div_adminMessage").fadeIn();
})

您可以使用post的回调成功函数来初始化剩余的加载:

$("#updateAdminMessage").live("click", function() {
        if($("#adminMessage").val() != ""){
            $.post("/includes/script_files/updateAdminMessage.php", { adminMessage: $("#adminMessage").val() }, success: function(){
                $("#div_adminMessage").hide();
                $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
                $("#div_adminMessage").fadeIn();
            })
        }
        else{
            alert('do not leave this field blank');
        }
    });

你是对的，jQuery.post()不是一个阻塞函数，但它的第三个参数是成功函数，所以你可以把任何你想发生的"之后"的帖子在那里:

        $.post("/includes/script_files/updateAdminMessage.php", { adminMessage: $("#adminMessage").val() }, function(data,status,xhr){
           $("#div_adminMessage").hide();
           $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
           $("#div_adminMessage").fadeIn(); });

这就是所谓的竞争条件。我假设您在后台有一些数据库，所以第一个php脚本和hide()相互竞争。解决方案是

在post和load之间添加一些睡眠
使用一个成功回调，它将等待post()完成。

欢迎来到异步的奇妙世界。

这需要进入"post"的成功回调处理程序:

$("#div_adminMessage").hide();
$('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
$("#div_adminMessage").fadeIn();

jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

看起来像这样

$.ajax({
    type: "POST",
    url: url,
    data: data,
    success: function (data, textStatus, jqXHR) {
        $("#div_adminMessage").hide();
        $('#div_adminMessage').load('/includes/script_files/loadAdminMessageClass.php');
        $("#div_adminMessage").fadeIn();
    },
    dataType: dataType
});

等。也许"fadeIn"应该在下一个回调中出现

你可以强制jQuery等待/阻塞直到请求完成，但这打破了AJAX背后的概念("A"代表异步):

...
async: false,
data: ....