Автообновление div с помощью jQuery - setTimeout или другой метод?

Question

Как именно вы делаете автоматическое обновление div с помощью JavaScript (в частности, jQuery)?

Я знаю о методе 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.

Кроме того, если сервер не отвечает, он не будет продолжать попытки.

В прошлом я использовал похожий метод с использованием .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

Есть плагин jQuery Timer , который вы можете попробовать

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

Это лучший код