Question

我正在开发一个轮询应用程序，其中页面每隔5秒从数据库获取结果，但页面闪烁得太糟糕，以至于破坏了整个体验。

我目前正在使用Jquery setInterval ()方法。

这是我的代码：

<script type="text/javascript">



$(document).ready(function (event) {
    // refreshes every 5 seconds
    setInterval(refresh, 5000);
      //event.preventDefault()
   // setInterval(refreshButton, 20000);  


});


function refresh() {
/* fade in the element with content id*/ 
   $("#content").load(window.location.href + "#content").fadeIn();

}
</script>

HTML：

<div class="container">

<div class="row" style="margin-top: 50px;"> 


 <center>  <button class="button button5" id="content"></button></center>

</div>

</div>

我现在的问题是如何在没有闪烁效果的情况下更新页面。以这种方式，用户将看不到页面闪烁。

感谢。

Answer 1

你可以像这样刷新功能吗？

function refresh() {
   /* fade in the element with content id*/ 
   $("#content").fadeOut(100);    
   $("#content").load(window.location.href + "#content")
   $("#content").fadeIn(100);
}

更好：

function refresh() {
       /* fade in the element with content id*/ 
       var data = window.location.href + "#content";
        $("#content").fadeToggle(200, function(){
            $("#content").load(window.location.href + "#content")
        });
}

如何使用Javascript / Jquery自动刷新页面而不闪烁？

1 个答案: