jQuery的工作太快？

Question

我對JQuery很陌生，我的代碼有一個小問題。 我希望你們中的任何一個都能幫助我。

我使用外部PHP文件將某些HTML數據加載到主文件中。 現在，還有另一個外部PHP文件，用於更新完全相同的數據。 我正在使用JQuery函數檢查我想更新的字段的值，並且如果它不為空，我會調用更新文件。 在重新加載DIV之后，我正在處理並將新數據發布到其中（使用外部加載數據文件）。

現在的問題是，我相信我的JQuery函數/ sometimes /不會等待更新文件完成，而是立即從第二個文件讀取新內容，而不必等待內容實際更新。 這種情況有時會發生，但不會經常發生。

這是我的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讀取和更新文件都可以正常工作。

Answer 1

問題在於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();
})

Answer 2

您可以使用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');
        }
    });

Answer 3

沒錯， 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(); });

Answer 4

這就是您所說的競賽條件。 我假設您在后台有一些數據庫，因此第一個php腳本和hide（）相互競爭。 解決方案是

1. 在發布和加載之間增加一些睡眠
2. 使用成功回調 ，它將等待post（）完成。

Answer 5

歡迎來到異步的美好世界。

這需要進入“ 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: ....