jQuery: comment ajouter un délai à une requête ajax?

Question

J'ai une fonction qui retourne un certain nombre de données déclenchées dans AJAX lors d'un typping. Mais, dès que je tape "long" comme "hello my name is", il lance une requête unique chaque fois que je tape une touche (10request en une fois et il faut 5 secondes pour obtenir 1 réponse à la requête).

Comment éviter cela? (je ne veux pas utiliser .onblur)

$(document).ready(function() 
    { 
     $('.search input[type="submit"]').hide(); 

     $('#search_keywords').keyup(function(key) 
     { 
     if (this.value.length >= 2 || this.value == '') 
     { 
      $('#loader').show(); 
      $('#jobs').load(
      $(this).parents('form').attr('action'), 
      { query: this.value + '*' }, 
      function() { $('#loader').hide(); } 
     ); 
     } 
     }); 
    }); 

Merci;)

Answer 1

Je tends à régler une minuterie sur cet événement keyup, comme ceci:

$('#search_keywords').keyup(function() { 
    clearTimeout($.data(this, 'timer')); 
    $(this).data('timer', setTimeout($.proxy(search, this), 500)); 
}); 
function search() { 
    if (this.value.length >= 2 || this.value == '') { 
    $('#loader').show(); 
    $('#jobs').load(
     $(this).parents('form').attr('action'), 
     { query: this.value + '*' }, 
     function() { $('#loader').hide(); } 
    ); 
    } 
} 

Ce pauses votre recherche dans une autre fonction, et nous sommes juste en retard de 500ms entre frapper une touche et tirer cette fonction de recherche. Si vous tapez une autre lettre, la minuterie de 500 ms se réinitialise avec le clearInterval(), donc une frappe rapide ne déclenchera pas 20 événements, mais seulement une fois que vous aurez mis une pause d'une demi-seconde. La partie $.proxy() est telle que this est correcte lorsque le setTimeout() s'exécute.