jquery自动刷新不闪烁

Posted 2023-02-22

【中文标题】jquery自动刷新不闪烁

【英文标题】：jquery auto refresh without blinking

【发布时间】：2012-10-30 17:43:31

【问题描述】：

<script type="text/javascript">
window.onload = setupRefresh;

function setupRefresh() 
  setTimeout("refreshPage();", 1000);

function refreshPage() 
   window.location = location.href;

页面现在每秒重新加载唯一的问题它闪烁如何解决这个问题

【问题讨论】：

需要使用ajax，直接在dom中应用内容

看起来它做了它不应该做的事？为什么要每秒重新加载页面？？

它当然会闪烁.. 页面需要重新加载，这需要一点时间。也不需要做你正在用javascript做的事情，只需使用meta标签

它需要每秒更新一次以检查新内容

不要每秒刷新整个页面，而是刷新一部分，否则用户会发疯。使用异步请求从服务器获取更新。也请参阅我的答案，并寻找 AJAX。

【参考方案1】：

您可以使用 div 和 .get 与 jquery 从您网站上的另一个页面获取数据。

你可以使用 setTimeOut(function, time)

$(function() 
    startRefresh();
);

function startRefresh() 
    setTimeout(startRefresh,1000);
    $.get('pagelink.php', function(data) 
        $('#content_div_id').html(data);    
    );

【参考方案2】：

如果页面完全重新加载并覆盖自身（包括正在重新加载的脚本，请尝试此版本：

function startRefresh() 
    $.get('', function(data) 
        $(document.body).html(data);    
    );

$(function() 
    setTimeout(startRefresh,1000);
);

【参考方案3】：

如果没有闪烁效果，您将无法以这种方式重新加载页面。查看 AJAX 以获取页面的更新内容并将其异步显示在“现有”页面中。

看看：http://www.brightcherry.co.uk/scribbles/jquery-auto-refresh-div-every-x-seconds/，刷新部分屏幕（该部分可以是页面唯一的<DIV>）。

【参考方案4】：

感谢函数的回答，但如果我想使用大约 1 分钟的延迟，我必须通过这种方式开始调用函数：

<script type="text/javascript">
//<![CDATA[
var vTimeOut;

$(function() 
  vTimeOut= setTimeout(startRefresh, 60000)
);


function startRefresh() 
  clearInterval(vTimeOut);
  vTimeOut= setTimeout(startRefresh, 60000);
  $(<#div>).load(<loadURL>);


//]]>
</script>

否则，startRefresh 函数会很快触发或重复更多次。