JavaScript在功能完成之前繼續！！ Ajax異步混淆和解決方案

Question

我有一個問題。 下面的函數可以100％運行，但是調用函數的if語句在函數返回結果之前就已解析！

“ test2”的警報將在警報之前顯示，並帶有“結果：” +數據框。 是什么原因？

（問題在於無論如何都將始終解析為false，因為即使要返回某些內容也不會返回任何內容！）

    function checkUsername ( username ) {
        $.post("ajax_messages.php",{
            func: "checkUsername",
            username: username
        }, function(data){
            alert("result: "+data);
            return data;
        });
    }

    $('.send').click( function () {
        if ( checkUsername($receiverBox.val()) == "true" ) {
            alert("test");
            return false;
        } else {
            alert("test2");
            return false;
        }
    });

編輯：

感謝您的迅速答復。 我嘗試了以下方法：

    $.ajaxSetup({
        async:false
    });

Edit2：但這也沒有達到預期效果。 作為一套正常的功能，我將被期望采取行動。 因此，我將嘗試以下更多方法

Edit3：成功！ 太棒了。 有點笨拙，但比我能找到的任何其他方法都平滑得多。 我希望這有幫助

    var checkUsernameResult = false;

    function checkErrorCheckingIsComplete( ) {
        if ( checkUsernameResult != false ) {
            alert( checkUsernameResult );
        }
    }

    function checkUsername ( username ) {
        $.post("ajax_messages.php",{
            func: "checkUsername",
            username: username
        }, function(data){
            alert("result: "+data);
            checkUsernameResult = data; // each check has one of these
            checkErrorCheckingIsComplete(); // all checks have this as the end
        });
    }

    $('.send', $message_box).click( function () {
        checkUsername( $receiverBox.val() );
        //more checks here
        return false;
    });

Answer 1

由於AJAX調用是asynchronous因此會發生這種情況。 對.post使用回調函數，然后在其中放入if語句。

您可以做的另一件事是使用同步調用。但這將阻止瀏覽器同時執行其他任何操作。

Answer 2

我已經有幾個月沒有使用jQuery了，但是我很確定您可以設置一個標志來強制Ajax調用作為同步調用發生。

Answer 3

我認為您可能必須創建另一個執行提交的按鈕，因為您將永遠無法獲得Ajax異步函數的響應。

使用“實際發送”類向HTML頁面添加另一個按鈕，然后嘗試執行此操作...

var asynchResult = "false";
function checkUsername ( username ) {
    $.post("ajax_messages.php",{
        func: "checkUsername",
        username: username
    }, function(data){
        alert("result: "+data);
        asynchResult = data;
        $('.actual-send').trigger('click');
    });
}

$('.send').click( function () {
    checkUsername($receiverBox.val())
    return false;
}
$('.actual-send').click( function () {
    if(asynchResult == "true") {
        alert("test");
        return true;
    } else {
        alert("test2");
        return false;
    }
}

Answer 4

就像其他答案所說的那樣，post（）方法是異步的，因此它獨立於其余代碼執行。

如有必要，您可以強制jquery使用async:false來同步調用服務器，但我認為您必須使用jQuery.ajax（）函數而不是.post（）速記來做到這一點。

不過，通常它在異步方面的工作要好得多，因為在同步模式下，它會在等待服務器響應時凍結網頁，這對您的訪問者而言不是一個很好的體驗。 一個更好的主意是使其保持異步模式，並在success（）回調中處理服務器響應。

Answer 5

您可以使用以下命令：

$.ajax({
  type: 'POST',
  url: 'ajax_messages.php',
  data: data,
  success: function(html){
   alert(html); 
  }
  dataType: dataType
});

因此，在POST成功執行函數上，它將捕獲您的ajax_messages.php將回顯並發出警報的任何內容

Answer 6

異步放置：false