使用jQuery自动刷新的div - setTimeout或其他方法？

Question

如何使用JavaScript（特别是jQuery）制作自动刷新的div？

我知道setTimeout方法，但这是否真的是一个好的实践方法？是否有更好的方法？

function update() {
    $.get("response.php", function(data) {
        $("#some_div").html(data);
    });
    window.setTimeout("update();", 10000);
}

- andyk

Answer 1

另一个修改：

function update() {
  $.get("response.php", function(data) {
    $("#some_div").html(data);
    window.setTimeout(update, 10000);
  });
}

这种方法的区别在于它会在ajax调用完成后等待10秒钟。因此，刷新之间的时间实际上是10秒钟+ajax调用的持续时间。这样做的好处是，如果您的服务器响应需要超过10秒钟，就不会发生两个（最终甚至是多个）同时发生的AJAX调用。

另外，如果服务器未能响应，它就不会继续尝试。

我以前使用过类似的方法，使用 .ajax 来处理更复杂的行为：

function update() {
  $("#notice_div").html('Loading..'); 
  $.ajax({
    type: 'GET',
    url: 'response.php',
    timeout: 2000,
    success: function(data) {
      $("#some_div").html(data);
      $("#notice_div").html(''); 
      window.setTimeout(update, 10000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#notice_div").html('Timeout contacting server..');
      window.setTimeout(update, 60000);
    }
}

在加载过程中显示加载信息（为典型的“Web 2.0”样式放置一个动画gif）。如果服务器超时（在此情况下超过2秒）或发生任何其他错误，则会显示错误，并在再次尝试联系服务器之前等待60秒。

在需要处理大量用户的快速更新时，这尤其有益，因为您不希望每个人都突然向滞后的服务器发送请求，而所有请求都会超时。

- gregmac

---

谢谢。我一直在寻找类似于Spry的loadInterval选项的jQuery，但这个也很好。再次感谢。 - andyk

Answer 2

$(document).ready(function() {
  $.ajaxSetup({ cache: false }); // This part addresses an IE bug.  without it, IE will only load the first number and will never refresh
  setInterval(function() {
    $('#notice_div').load('response.php');
  }, 3000); // the "3000" 
});

- Viktor Trón

Answer 3

有一个jQuery定时器插件，您可能想尝试一下

- John Sheehan

---

谢谢，这绝对更加简洁，重置间隔会是一个不错的补充。 - andyk

Answer 4

function update() {
  $("#notice_div").html('Loading..'); 
  $.ajax({
    type: 'GET',
    url: 'jbede.php',
    timeout: 2000,
    success: function(data) {
      $("#some_div").html(data);
      $("#notice_div").html(''); 
      window.setTimeout(update, 10000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#notice_div").html('Timeout contacting server..');
      window.setTimeout(update, 60000);
    }
});
}
$(document).ready(function() {
    update();
});

这是更好的代码。

- Faghani