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

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

與此不同的是，它會等待10秒後Ajax調用是一個。所以真正的刷新時間是10秒+ ajax調用的時間。這樣做的好處是，如果您的服務器需要超過10秒的響應時間，則不會同時發生兩個（並且最終是多個）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動畫在那裏爲典型的「網絡2.0 「風格）。如果服務器超時（在這種情況下需要超過2秒）或發生任何其他類型的錯誤，則會顯示錯誤，並且在再次聯繫服務器之前等待60秒。

這對於更多用戶進行快速更新尤爲有利，您不希望每個人都用突然超時的請求突然癱瘓滯後的服務器。

Answer 2

There's a jQuery Timer plugin，你可能想嘗試

Answer 3

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

這是更好的代碼

Answer 4

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