使用ajax自动刷新页面数据

Question

我有一个页面，其中包含用户在队列中完成的项目列表。项目被添加到数据库中，我需要更新此列表并定期（可能每分钟）反映这些更改。

我不想为页面添加元刷新，因为我想避免重新加载页面。我已经有一个通过ajax更新列表的函数，所以我想每分钟调用一次这个函数。

初次加载页面后，如何在不执行阻止javascript循环的情况下重复调用此函数？有没有办法暂停setInterval或其他东西以允许其余的队列池执行？

我担心这件事发生了：

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

Answer 1

while(true)循环确实会阻止所有其他脚本的执行。 setInterval不会。

理想的解决方案是像socket.io这样的网络套接字。有了这个，你可以拥有像

这样简单的东西

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);