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

Question

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

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

在我的javascript中，我每秒都会用refresh.php自动刷新#状态。

但是当我检查我的网页元素并点击网络时。

你能帮我解决这个问题吗？

Answer 1

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

Answer 2

每次refresh.php的新(请求)值等于current时，此代码将在稍后的timeouts.min中请求#status。如果值不同，则下次超时将再次为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 );