javascript - ejemplos - Div auto-refrescante con jQuery-setTimeout u otro método?

timer jquery ejemplos

Question

¿Cómo se hace exactamente un div auto-refrescante con JavaScript (específicamente, jQuery)?

Sé sobre el método setTimeout , pero ¿es realmente una buena práctica? hay algun metodo mejor?

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

Answer 1

Otra modificación:

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

La diferencia con esto es que espera 10 segundos DESPUÉS de que la llamada ajax sea una. Entonces realmente el tiempo entre las actualizaciones es de 10 segundos + duración de la llamada ajax. El beneficio de esto es que si su servidor tarda más de 10 segundos en responder, no se producen dos (y finalmente, muchas) llamadas AJAX simultáneas.

Además, si el servidor no responde, no seguirá intentándolo.

He usado un método similar en el pasado usando .ajax para manejar un comportamiento aún más complejo:

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

Esto muestra un mensaje de carga durante la carga (ponga un gif animado allí para un estilo típico de "web 2.0"). Si el servidor expira (en este caso tarda más de 2 segundos) o se produce cualquier otro tipo de error, muestra un error y espera 60 segundos antes de volver a ponerse en contacto con el servidor.

Esto puede ser especialmente beneficioso cuando se realizan actualizaciones rápidas con una mayor cantidad de usuarios, donde no se desea que todos dejen inválido a un servidor rezagado con solicitudes que de todos modos simplemente agotan el tiempo de espera.

Answer 2

Hay un plugin jQuery Timer que tal vez quieras probar

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

Este es un mejor código

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