Question

我在活动中有以下内容：

function onclickEvent () {
     $.ajax({
       url: "somePage.html",
       beforeSend: function( xhr ) {   
            $('#Element1').hide("slow",function() {                                                                                                                              
                $('#Loading').show("slow");
            }); 

        }

     }).done(function( data ) {                   
          $('#Loading').hide("slow",function() {                                                                                                                    
             $('#Element1').show("slow");                                                     
          });                                                      
    });

}

第一次运作良好，但第二次（第二次点击）“完成”ajax加载不隐藏，始终可见。

我做错了什么？

Answer 1

您首先隐藏了Element1，因此您需要先在成功/完成时显示它。 show()与hide()配对，反之亦然，似乎是以优先权为切入点。这似乎是行为。您可能希望进一步阅读这些功能的文档。

<script src="jquery.min.js"></script>
<script>
function onclickEvent () {          
    $.ajax({
        url: "somePage.html",
        beforeSend: function( xhr ) {   
                $('#Element1').hide("slow",function() {                                                                                                                              
                    $('#Loading').show("slow");
                }); 
        }
    }).done(function( data ) {                   
        $('#Element1').show("slow", function() {
            $('#Loading').hide("slow");
        });
    });
};
</script>
<div id="Element1" style="display:block;">
    Element 1
</div>
<div id="Loading" style="display:none;">
    Loading
</div>
<button onclick="onclickEvent();">Click Me</button>

使用成功

function onclickEvent () {
    $.ajax({
        url: "somePage.html",
        beforeSend: function( xhr ) {   
            $('#Element1').hide("slow",function() {                                                                                                                              
                $('#Loading').show("slow");
            }); 
        },
        success: function( data ) {                   
            $('#Element1').show("slow", function() {
                $('#Loading').hide("slow");
            });
        }
    });
};

Answer 2

看起来有些事情需要修改才能让我按照认为的方式工作。

beforeSend功能中的$.ajax()设置旨在为您提供在发送请求之前修改请求的位置。这可能不是调用第一个动画函数的最佳位置。
动画回调和ajax回调似乎导致竞争条件 - 看起来ajax请求可能在初始动画仍在运行时返回，这意味着#Loading元素在隐藏时显示。

此示例假定在页面加载时默认情况下应隐藏#Loading元素，并且即使ajax请求失败，元素也应恢复到其初始状态（always而不是{{1 }}）。

done

$(function() {
  $('#button').on('click', function() {
    $('#Element1').hide('slow', function() {
      $('#Loading').show('slow', function() {
        $.ajax({
            url: 'somePage.html'
          })
          .always(function(data) {
            $('#Loading').hide('slow', function() {
              $('#Element1').show('slow');
            });
          });
      });
    });
  })
})

#Loading { 
  display: none; 
}

这里发生的事情是，点击<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="Element1"> Element1 </div> <div id="Loading"> Loading </div> <button id="button"> Button </button>时，会切换切换动画（button和hide()），然后会发送ajax请求作为show()动画的回调，以便在＃show()元素可见之前请求不会消失。

jQuery隐藏和显示从不工作

2 个答案: