我在自动刷新网页内容时遇到问题

Posted 2023-02-24

【中文标题】我在自动刷新网页内容时遇到问题

【英文标题】：I'm having problem on auto refreshing a content in a web page

【发布时间】：2019-04-24 01:41:46

【问题描述】：

我正在创建一个网页，该网页将自动刷新内容以始终获取数据库中的最新数据。这是我的 javascript 代码。

setInterval(function() 
    $("#status").load('refresh.php');
,1000);

在我的 javascript 中，我每秒使用 refresh.php 自动刷新 #status。

但是当我检查我的网页元素并点击网络时。它还每秒请求（垃圾邮件）refresh.php，我认为这是一种不好的做法。

你能帮我解决这个问题吗？或者你能建议更好的 ajax 代码来自动刷新内容而不需要太多的 php 文件吗？

【问题讨论】：

您如何改变这一点取决于这些更新对时间的敏感程度。您是正确的，每秒 ajax 请求会给服务器带来相当大的负载。如果您需要实时更新，请使用 websockets，否则需要平衡速度需求和您认为适合服务器的内容。例如，您可能决定每 10 分钟执行一次就足够了，只需相应地更改间隔延迟

【参考方案1】：

您可能应该为此使用 websocket，从服务器获取最新状态作为数据，然后使用 javascript 仅更改页面的该部分

【参考方案2】：

每当#status 的新（请求）值等于当前值时，此代码将在稍后在timeouts.min 请求refresh.php。如果值不同，下次超时将再次为timeouts.min。

var timeouts=
 min:1000, // min await timeout = 1s
 max:16000 // max await timeout = 16s
;
var currentTo = timeouts.min;

function setAutoRefresh( to )
  setTimeout( function() 
    var current = $("#status").text();// or .html()
    $("#status").load('refresh.php', function() 
      // if we are load a new value
      if( current !== $("#status").text()) 
        currentTo = timeouts.min;
      // if loaded value are same to current
       else 
        currentTo += timeouts.min; // or currentTo *= 2; for example
        if( currentTo > timeouts.max )
          currentTo = timeouts.max;
        
      
      console.log('Next #status refresh after ' + currentTo + 'ms');
      // Set a new timeout
      setAutoRefresh( currentTo );
    );
  , to);


// Set the first timeout
setAutoRefresh( timeouts.min );

【讨论】：

这也会发送垃圾邮件 resfresh.php 我认为 OP 希望避免。

不！仅当请求的值与当前值不同时，它的垃圾邮件。如果值相同，则此代码在上一个之后越来越多地发出请求

load() 是异步的，此代码假定它不是。您还应该正确解释它的作用以及它如何解决 OP 的问题

load() is asynchronous 谢谢！固定。