0

我正在开发一个项目，其中导航并没有真正更改页面，而是使用基于我单击的导航链接的服务获取数据，并使用 jquery .html() 方法更新数据，我想使用一个在单击任何内容时显示的加载器链接并隐藏内容，当 ajax 服务成功时，我想删除加载器并显示内容，但不知何故动画重叠导致动画失败，

在这里的示例代码中，我不是使用 ajax 来更新我的页面，而是使用简单的按钮和 jquery 来更新数据

        <body>

        <div id="loader">
            <img src="loader.gif" alt="">
        </div>

        <br>

        <div id="content">
            This is the content
        </div>

        <input type="button" id="update" value="Update Data">




    </body>

        <script>

        function showContent(){
      $('#loader').fadeOut(200).promise().done(function(){
           $('#content').fadeIn(200).promise().done(function(){
           });
      });
    }


    function hideContent(){
        $('#content').fadeOut(200).promise().done(function(){
           $('#loader').fadeIn(200).promise().done(function(){
           });
        });
    }

$("#update").click(function(){
    hideContent();
    $("#content").html("New Data");
    setTimeout(showContent(), 10000);

});



        </script>

单击更新时，应该会发生这种情况，内容应该消失，加载程序应该出现，更新内容，加载程序消失，内容出现，

但我得到加载器和内容都出现在最后

我使用 setTimeout 来延迟，但它不起作用，我之前也使用了一些标志，但也没有用。JsFiddle : JsFiddleLink

4

1 回答 1

0

为什么使用setTimeout()？你可以return，锁住承诺

function showContent(){
  return $('#loader').fadeOut(200).promise().done(function(){
       return $('#content').html(data).fadeIn(200).promise()
  });
}


function hideContent(){
    return $('#content').fadeOut(200)
    .done(function() {
       this.empty();
       return $('#loader').fadeIn(200).promise()
    });
}

$("#update").click(function() {
  hideContent().then(showContent)
})
于 2016-07-27T00:18:12.540 回答