Comment puis-je ajouter un délai pour l'envoi d'une requête ajax ?

Question

Voici mon code :

$("input").on('keydown', function(){
    $.ajax({
        url :  '/files/tags_autocomplete.php',
        dataType : 'JSON',
        success : function (tags) {
            $("ul").html(tags.output);
        }
    });
});

Mon code suggère des balises (celles qui ont une sous-chaîne correspondante à ce que l'utilisateur a écrit jusqu'à présent) à l'utilisateur sous forme de boîte de saisie automatique lorsqu'il tape ses balises.

Quel est mon problème ? Mon code actuel envoie une nouvelle requête ajax à chaque keydown. Par exemple, si l'utilisateur écrit quelque chose, mon script envoie 9 requêtes ajax ce qui semble être un cauchemar.

Quoi qu'il en soit, comment puis-je gérer cela ? Dois-je mettre en place un délai pour l'envoi ? Quelque chose comme "ne pas envoyer la requête avant 1 seconde après la dernière insertion de caractère" ? ou y a-t-il une meilleure idée ?

Answer 1

Vous pourriez créer un mécanisme de régulation simple

$("input").on('keydown', function(){

    clearTimeout( $(this).data('timer'); )

    var timer = setTimeout(function() {
      $.ajax({
          url :  '/files/tags_autocomplete.php',
          dataType : 'JSON',
          success : function (tags) {
              $("ul").html(tags.output);
          }
      });
    }, 500);

    $(this).data('timer', timer);
});