Jquery-Verzögerung zwischen den Schlüsselfunktionen

Question

Ich habe ein bisschen Code, den ich schreibe, und versuche, die Bing-Such-API in meine Site mit Ergebnissen der Sofortsuche zu integrieren. Ich benutze jquery's keyup Funktion, um die Daten an mein serverseitiges Skript zu senden, welches dann das bing Such-XML erhält und die Ergebnisse anzeigt.

Die Sorge, die ich habe, ist, dass ich zu viele unncessary Hits zu meinen Skripten machen werde. Kann mir bitte jemand einen Blick darauf werfen und mir sagen, wie ich eine Verzögerung von 1 Sekunde zwischen den Tasten als Timer setzen kann? also wird es nur alle ungefähr eine Sekunde aktualisiert?

Das ist was ich bisher erstellt habe, aber ich weiß nicht, ob es korrekt ist ???

<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

Hier ein Beispiel für ein Eingabefeld eingegeben wird, zu nehmen und mit einer geringeren Geschwindigkeit, die Eingabe zu suchen.

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

Dieses Beispiel zeigt die Ajax-Stück nicht tun, aber Sie werden die Idee. Versuchen Sie, das Eingabefeld so schnell wie möglich einzugeben. Es aktualisiert das Suchfeld mit einer verzögerten Rate. Es erinnert sich daran, dass der Zustand "schmutzig" ist und dann bei Bedarf aktualisiert wird.

Hoffe, dass Sie damit beginnen.

Bob

Answer 2

Ich werde es sollte so etwas wie diese

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

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

logisch tun arbeiten, aber ich habe nicht probieren! Das Syntex könnte einige Änderungen benötigen.

und hier ist der Frieden Code Code, der Ihnen dabei hoffentlich helfen wird;)

$(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

Hier ist ein Beispiel, das auf dem Google-Such ähnlich ist. Es wird nicht gesucht, bis der Benutzer die Eingabe angehalten hat.

http://jsfiddle.net/WNX5q/