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

IT技术 javascript jquery
2021-01-17 22:42:44

您究竟如何div使用 JavaScript(特别是 jQuery)进行自动刷新

我知道这个setTimeout方法,但这真的是一个好习惯吗?有没有更好的方法?

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

另一个修改:

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

这会在加载时显示一条加载消息(为典型的“web 2.0”风格在其中放置一个动画 gif)。如果服务器超时(在这种情况下需要超过 2 秒)或发生任何其他类型的错误,它会显示错误,并在再次联系服务器之前等待 60 秒。

这在对大量用户进行快速更新时特别有用,您不希望每个人突然因请求而导致滞后的服务器瘫痪,无论如何都只是超时。

谢谢。我正在为 jQuery 寻找类似 Spry 的 loadInterval 选项的东西,但这会很好。再次,谢谢。
2021-04-09 22:42:44
$(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" 
});

您可能想尝试一个 jQuery Timer 插件

谢谢,这绝对更干净,重置间隔将是一个很好的补充。
2021-03-26 22:42:44
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();
});

这是更好的代码