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

你究竟用JavaScript(特别是jQuery)制作一个自动刷新div

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

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

另一个修改:

 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秒。

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

 $(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插件

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

这是更好的代码