Question

我正在尝试在用户点击提交按钮时创建加载图片。出于一些奇怪的原因，似乎hide事件与show事件同时执行（我根本看不到加载图像。我尝试添加延迟来隐藏但是没有工作）如果我删除了hide事件，但是，加载图像显示就好了。有任何想法吗？非常感谢你帮助我。

$('#submitButton').click(function() {
    $("#loading-popup").ajaxStart(function() {
        $(this).show();
    }); //show loading image
    //.....................
    $.ajax({
        type: 'POST',
        dataType: "json",
        //.....................
        success: function(jsonData) {
            //.....................
            $("#loading-popup").delay(15000).hide(); //hide loading image
            //.....................
        },

    });
});

Answer 1

没有任何参数的

.hide()是与.css('display', 'none')类似的同步操作。它不是动画，因此不遵守动画延迟。

一个简单的解决方案是简单地将0作为持续时间传递，因此它会触发遵守延迟的动态版.hide()：

$('#foo').delay(2000).hide(0);

Fiddle

请注意，在某些版本的jQuery中，将0作为持续时间传递是错误的，因此如果发现问题，请升级到1.8.2或版本的最新稳定版本。如果您需要延迟，也可以使用setTimeout，即使这只是一个额外的混乱。

Answer 2

$('#submitButton').click(function() {

  $.ajax({
      type: 'POST',
      dataType: "json",
      beforeSend:  $("#loading-popup").show(); 
      //.....................
      success: function(jsonData) {
          //.....................
          $("#loading-popup").hide(); //hide loading image
          //.....................
      },

  });
});

Jquery / Ajax显示/隐藏事件顺序

2 个答案: