代码之家 › 专栏 › 技术社区 › andyk

使用jquery-settimeout或其他方法自动刷新DIV?

jquery javascript

andyk · 技术社区 · 16 年前

你到底是如何使一个自动刷新 div 使用javascript(特别是jquery)?

我知道 setTimeout 方法,但这真的是一个好的实践吗?有更好的方法吗?

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

4 回复 | 直到 7 年前

gregmac 16 年前

另一个修改:

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作为典型的“Web2.0”样式)。如果服务器超时(在这种情况下需要超过2秒)或发生任何其他类型的错误,则会显示错误,并等待60秒后再与服务器联系。

这在与大量用户进行快速更新时尤其有益,因为在这种情况下,您不希望所有人突然破坏滞后的服务器,因为这些请求都会以任何方式超时。

Viktor Trón 13 年前

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

John Sheehan 16 年前

There's a jQuery Timer plugin 你可能想试试

Faghani 13 年前

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