使用Ajax自動刷新頁面數據

Question

我有一個頁面，其中包含項目列表，供用戶在隊列中完成。 項目已添加到數據庫中，我需要更新此列表並定期（也許每分鍾）反映這些更改。

我不想向頁面添加元刷新，因為我想避免重新加載頁面。 我已經有一個通過ajax更新列表的函數，因此我想每分鍾調用一次此函數。

最初加載頁面后，如何在不執行阻止JavaScript循環的情況下重復調用此函數？ 有沒有一種方法可以暫停setInterval或某種允許其余隊列池執行的方法？

我擔心這種情況的發生：

$('document').ready(function () { 
      setInterval( function() {
           updateList();
      }, 60000);
}

Answer 1

while(true)循環確實會阻止所有其他腳本的執行。 setInterval不會。

理想的解決方案是像socket.io的Web套接字。 有了這個，您可能會像

socket.on("add", function (msg) {
    addItem(msg);
}).on("removeItem", function (msg) {
    removeItem(msg);
})

然后，在服務器上，您可以簡單地執行socket.emit("messageType", msg); 。 這樣可以避免您必須不斷使用AJAX輪詢服務器。

但是，如果不可能，則可以使用以下命令修復代碼

$(document).ready(function () {
    var updateInterval = setInterval(updateList, 60000);
    // to clear interval: clearInterval(updateInterval);
})

其中updateList是用於通過AJAX輪詢服務器並將任何接收到的任務追加到頁面的函數。

Answer 2

從評論中總結：

• 您應該擺脫while(true) ，它阻塞了其余代碼。
• setInterval()將每1分鍾執行一次。 無論如何。

請注意，刪除while ， setInterval()將不會阻塞其余代碼。

Answer 3

您可以使用以下兩種方法之一：

setTimeout(expression, timeout); 超時后執行一次代碼/功能。 它是非阻塞的，因此您不必將其置於循環中。 您可以調用自身以使其無限執行。

function updateFunction() {
  setTimeout(function() {
    //update the page here
    updateFunction();
  }, 1000);
}

或者您可以使用setInterval(expression, timeout); 間隔時間執行代碼/功能，並指定它們之間的超時時間。

setInterval(function() {
  //update the page here
}, 1000);