¿Cómo activar la solicitud AJAX periódicamente?

113

<meta http-equiv="Refresh" Content="5">

Este script recarga o actualiza la página cada 5 segundos. Pero quiero hacerlo usando jQuery y llamada AJAX. ¿Es posible?

jquery ajax

— user12345
fuente

281

Como otros han señalado, setInterval y setTimeout harán el truco. Quería resaltar una técnica un poco más avanzada que aprendí de este excelente video de Paul Irish: http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

Para las tareas periódicas que pueden terminar tomando más tiempo que el intervalo de repetición (como una solicitud HTTP en una conexión lenta), es mejor no usar setInterval(). Si la primera solicitud no se ha completado y comienza otra, podría terminar en una situación en la que tenga varias solicitudes que consumen recursos compartidos y se mueren de hambre entre sí. Puede evitar este problema esperando para programar la siguiente solicitud hasta que se complete la última:

// Use a named immediately-invoked function expression.
(function worker() {
  $.get('ajax/test.html', function(data) {
    // Now that we've completed the request schedule the next one.
    $('.result').html(data);
    setTimeout(worker, 5000);
  });
})();

Por simplicidad, utilicé la devolución de llamada de éxito para programar. La desventaja de esto es que una solicitud fallida detendrá las actualizaciones. Para evitar esto, puede usar la devolución de llamada completa en su lugar:

(function worker() {
  $.ajax({
    url: 'ajax/test.html', 
    success: function(data) {
      $('.result').html(data);
    },
    complete: function() {
      // Schedule the next request when the current one's complete
      setTimeout(worker, 5000);
    }
  });
})();

— dibujante
fuente

3

¿No es esto como una llamada de función recursiva? Si es así, ¿está bien dejar que se ejecute durante un largo período de tiempo una y otra vez, porque es recursivo? puede ser un caso de recursividad infinita siempre que ajax se siga ejecutando con éxito

— Rahul Dole

1

Además, si usa setTimeout, ¿hay alguna manera de detener este hilo desde fuera de este bloque de código? Al igual que en setInterval, simplemente puede llamar a clearInterval ().

— Rahul Dole

16

@RahulDole esa es una buena pregunta pero no es recursiva. No se llama directamente desde la función de trabajo, por lo que la pila no seguirá creciendo. Para su segundo punto, consulte los documentos de setTimeout () y verá que devuelve una identificación numérica que se puede pasar a clearTimeout ().

— empate

7

@RahulDole, si estás en Chrome, juega con console.trace () para ver la pila de llamadas de una función. Las funciones invocadas por setTimeout () tendrán una pila muy corta y definitivamente no incluirá la función que llamó a setTimeout ().

— empate

1

@Anupal acaba de crear una nueva pregunta.

— empate

34

Sí, puede utilizar el setTimeout()método JavaScript o el setInterval()método para invocar el código que le gustaría ejecutar. Así es como puede hacerlo con setTimeout:

function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  setTimeout(executeQuery, 5000); // you could choose not to continue on failure...
}

$(document).ready(function() {
  // run the first time; all subsequent calls will take care of themselves
  setTimeout(executeQuery, 5000);
});

— Tahbaza
fuente

1

Utilice solo setTimeout (executeQuery, 5000); en lugar de setTimeout ('executeQuery ()', 5000); - es más corto y rápido.

— rsp

4

Puede usar setTimeouto setInterval.

La diferencia es que setTimeout activa su función solo una vez y luego debe configurarla nuevamente. setInterval sigue activando la expresión una y otra vez, a menos que le diga que se detenga

— Puneet
fuente

1

Probé el siguiente código,

    function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  setTimeout(executeQuery, 5000); // you could choose not to continue on failure...
}

$(document).ready(function() {
  // run the first time; all subsequent calls will take care of themselves
  setTimeout(executeQuery, 5000);
});

Esto no funcionó como se esperaba durante el intervalo especificado, la página no se cargó por completo y la función se llamó continuamente. Es mejor llamar al setTimeout(executeQuery, 5000);exterior executeQuery()en una función separada como se muestra a continuación,

function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  updateCall();
}

function updateCall(){
setTimeout(function(){executeQuery()}, 5000);
}

$(document).ready(function() {
  executeQuery();
});

Esto funcionó exactamente como se esperaba.

— Srihari
fuente