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

Question

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

$('#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);​

小提琴

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

Answer 2

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

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

  });
});