Comment lancer périodiquement une demande AJAX?


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

Ce script recharge ou actualise la page toutes les 5 secondes. Mais je veux le faire en utilisant jQuery et AJAX call. C'est possible?

Réponses:


281

Comme d'autres l'ont souligné, setInterval et setTimeout feront l'affaire. Je voulais souligner une technique un peu plus avancée que j'ai apprise de cette excellente vidéo de Paul Irish: http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

Pour les tâches périodiques qui pourraient prendre plus de temps que l'intervalle de répétition (comme une requête HTTP sur une connexion lente), il est préférable de ne pas l'utiliser setInterval(). Si la première demande n'est pas terminée et que vous en démarrez une autre, vous pourriez vous retrouver dans une situation où vous avez plusieurs demandes qui consomment des ressources partagées et se meurent de faim. Vous pouvez éviter ce problème en attendant de planifier la prochaine demande jusqu'à ce que la dernière soit terminée:

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

Pour plus de simplicité, j'ai utilisé le rappel de succès pour la planification. L'inconvénient est qu'une demande échouée arrêtera les mises à jour. Pour éviter cela, vous pouvez utiliser le rappel complet à la place:

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

3
N'est-ce pas comme un appel de fonction récursif? Si oui, est-il acceptable de le laisser fonctionner pendant une longue période, encore et encore, car il est récursif? peut être un cas de récursion infinie tant que ajax continue de s'exécuter avec succès
Rahul Dole

1
De plus, si vous utilisez setTimeout, existe-t-il un moyen d'arrêter ce thread de l'extérieur de ce bloc de code? Comme dans setInterval, vous pouvez simplement appeler clearInterval ().
Rahul Dole

16
@RahulDole c'est une bonne question mais ce n'est pas récursif. Il n'est pas appelé directement à partir de la fonction de travail, donc la pile ne continuera pas à croître. Pour votre deuxième point, consultez la documentation pour setTimeout () et vous verrez qu'elle renvoie un identifiant numérique qui peut être passé à clearTimeout ().
tirage le

7
@RahulDole si vous êtes dans Chrome, jouez avec console.trace () pour voir la pile d'appels d'une fonction. Les fonctions appelées par setTimeout () auront une pile très courte et n'incluront certainement pas la fonction qui a appelé setTimeout ().
tirage le

1
@Anupal crée simplement une nouvelle question.
tirage

34

Oui, vous pouvez utiliser la setTimeout()méthode ou la setInterval()méthode JavaScript pour appeler le code que vous souhaitez exécuter. Voici comment vous pouvez le faire avec 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);
});

1
Utilisez simplement setTimeout (executeQuery, 5000); au lieu de setTimeout ('executeQuery ()', 5000); - c'est plus court et plus rapide.
rsp

4

Vous pouvez utiliser setTimeoutou setInterval.

La différence est que setTimeout ne déclenche votre fonction qu'une seule fois, puis vous devez la redéfinir. setInterval continue de déclencher l'expression encore et encore, à moins que vous ne lui disiez d'arrêter


1

J'ai essayé le code ci-dessous,

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

Cela n'a pas fonctionné comme prévu pendant l'intervalle spécifié, la page ne s'est pas chargée complètement et la fonction a été appelée en continu. Il est préférable d'appeler l' setTimeout(executeQuery, 5000);extérieur executeQuery()dans une fonction distincte comme ci-dessous,

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

Cela a fonctionné exactement comme prévu.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.