Délai Jquery entre les fonctions de clavier

Question

J'ai un peu de code que j'écris, essayant d'intégrer l'API de recherche bing dans mon site avec des résultats de recherche instantanée. J'utilise la fonction keyup de jquery pour envoyer les données à mon script côté serveur qui obtient ensuite la recherche bing xml et affiche les résultats. Le souci que j'ai est que je vais faire beaucoup trop de hits inutiles à mes scripts. Quelqu'un peut-il regarder s'il vous plaît et me dire comment je peux mettre un retard de 1 seconde entre les touches comme une minuterie? donc il ne mettra à jour les résultats que toutes les secondes environ?

C'est ce que j'ai créé jusqu'à présent, mais je ne sais pas si c'est correct ???

<script type="text/javascript"> 
var delay = (function() { 

    var timer = 0; 

    return function(callback, ms) { 

     clearTimeout(timer); 

     timer = setTimeout(callback, ms); 

    }; 

})(); 



function reloadsearch() { 
    var searchterms = $('#q').val(); 
    if (searchterms.length >= 3) { 
     delay(function() { 
      var data = 'source=ajax&q=' + searchterms; 
      $.ajax({ 
       type: "GET", 
       url: "results/", 
       data: data, 
       success: function(html) { 
        if (html !== '') { 
         $("#search-results").html(html); 
         $("#search-results").fadeIn(500); 
        } 
       } 
      }); 
     }, 250); 
    } 

    else 

    { 
     $("#search-results").fadeOut(250); 
    } 
}; 



$('#q').keyup(function() { 
    reloadsearch() 
}); 

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

Answer 1

Voici un exemple d'une boîte d'entrée en prenant l'entrée et la recherche à un rythme plus lent que le typage.

http://jsbin.com/ebela4/8/edit

Cet exemple ne fait pas la pièce ajax, mais vous avez l'idée. Essayez de taper dans la zone de saisie aussi vite que possible. Il mettra à jour le champ de recherche à un rythme différé. Il se souvient que l'état est «sale» et rafraîchit si nécessaire.

J'espère que cela vous permet de démarrer.

Bob

Answer 2

je vais faire quelque chose comme ça

var delay = false; 
$('#q').keyup(function() { 

if(!delay){ 
    delay = true; 
    reloadsearch().delay(1000); 
    delay = false; 
}); 

logiquement il devrait fonctionner mais je n'ai pas donner un essai! le syntex pourrait avoir besoin de quelques changements.

et est ici le code de paix de code qui vous aidera à ce je l'espère;)

$(document).ready(function(){ 

function reloadsearch() { 
    var searchterms = $('#q').val(); 
    if (searchterms.length >= 3) { 

      var data = 'source=ajax&q=' + searchterms; 
      $.ajax({ 
       type: "GET", 
       url: "results/", 
       data: data, 
       success: function(html) { 
        if (html !== '') { 
         $("#search-results").html(html); 
         $("#search-results").fadeIn(500); 
        } 
       } 
      }); 
     } 

    else 

    { 
     $("#search-results").fadeOut(250); 
    } 
}; 

var delayOn = false; 
$("#test").click(function(){ 
if(!delayOn){ 
delayOn = true; 
reloadsearch().delay(2000).queue(function(){delayOn = false;$(this).dequeue();}); 
     } 
        }); 
       }); 

Answer 3

Voici un exemple qui est similaire à la recherche de Google. Il ne cherchera pas tant que l'utilisateur n'aura pas tapé.

http://jsfiddle.net/WNX5q/