如何使用jQuery使div可見？

Question

 function showwaitmsg() {
        $("#wait").fadeIn();
        return  true;
    }
    function hidewaitmsg() {
        $("#wait").fadeOut();

    }

    $("a:contains('Test1')").bind("click", function () {
      if (showwaitmsg())
        test2(); // Function contains XMLHttpRequest
        hidewaitmsg();
    });


   <div id="wait" class="overlay" style="display: none">
             Please Wait
        <img src="~/loading.gif" />
    </div>

我正在嘗試在處理XMLHttpRequest時使用以上代碼顯示“請稍候”消息。 處理請求后，wait div出現太晚。 您能告訴我單擊test1按鈕后如何使wait div可見嗎？

Answer 1

$("#id_of_button").on('click', function() {
    $("#wait").show();
});

Answer 2

與其在test2()之外調用showwaitmsg()和showwaitmsg() ， hidewaitmsg()將它們包括在ajax調用中。

$.ajax({
    ...,
    beforeSend: showwaitmsg(),
    ...,
    complete: hidewaitmsg()
});

在beforeSend函數中返回false將取消請求。 從jQuery 1.5開始，無論請求的類型如何，都會調用beforeSend選項。 還值得注意的是，在success執行並回調error后將調用complete 。

Answer 3

最好將此代碼移到AJAX調用本身，如下所示：

$.ajax({ 
    ...,
    beforeSend: function() {
        $('#wait').fadeIn();
    },
    complete: function() {
        $('#wait').fadeOut();
    }
});

這將有助於正確地分離邏輯，並支持在代碼中進行此類AJAX調用的更多方法，例如，按下鍵盤按鈕等。