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按钮，我应该怎么做才能看到等待div？

Answer 1

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

Answer 2

不应在showwaitmsg()之外调用hidewaitmsg()和test2()，而应将其包含在您的ajax调用中。

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

在beforeSend函数中返回false将取消请求。从jQuery 1.5开始，无论请求的类型如何，都将调用beforeSend选项。值得注意的是，在complete和success回调执行后调用error。

Answer 3

将此代码移动到AJAX调用本身要好得多，如下所示：

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

这将有助于正确分离逻辑并支持更多方法在代码中进行此类AJAX调用，例如按键盘按钮等

如何使用jquery使div可见？

3 个答案: