Question

你究竟如何使用JavaScript（特别是jQuery）自动刷新div？

我知道setTimeout方法，但它真的是一个好习惯吗？有更好的方法吗？

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

Answer 1

另一个修改：

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

与此不同的是，它在ajax呼叫为1之后等待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);
    }
}

这会在加载时显示加载消息（将动画gif放在那里以获得典型的“web 2.0”样式）。如果服务器超时（在这种情况下需要超过2秒）或发生任何其他类型的错误，则会显示错误，并且在再次联系服务器之前等待60秒。

当使用大量用户进行快速更新时，这可能会特别有用，在这种情况下，您不希望每个人都突然瘫痪落后的服务器，而这些请求只是暂时超时。

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

Answer 3

There's a jQuery Timer plugin您可能想尝试

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

这是更好的代码

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

4 个答案: