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

Как именно вы создаете автовосстановление div с JavaScript (в частности, jQuery)?

Я знаю о методе setTimeout, но действительно ли это хорошая практика? Есть ли лучший способ?

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

Ответы

Ответ 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 секунд, прежде чем снова связаться с сервером.

Это может быть особенно полезно при выполнении быстрых обновлений с большим количеством пользователей, где вы не хотите, чтобы каждый внезапно искалечил отстающий сервер запросами, которые все время просто выходят из строя.

Ответ 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" 
});

Ответ 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();
});

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