AJAX: Ritardo per la ricerca durante la digitazione nel campo modulo

Question

Sul mio sito Web utilizzo JavaScript/AJAX per eseguire ricerche e visualizzare risultati mentre l'utente sta ancora digitando.

HTML (corpo):

<form action="" method="post" accept-charset="utf-8"> 
    <p><input type="text" name="q" id="q" value="" onkeyup="doSearch(this.value)" /></p> 
</form> 

JavaScript (intestazione):

function doSearch(text) { 
    // do the ajax stuff here 
    // call getResults.php?search=[text] 
} 

ma questo potrebbe causare un sacco di richieste provenienti al server.

Così voglio alleviare il server attraverso la creazione di un ritardo:

Ogni volta che l'evento onKeyUp viene licenziato, la funzione doSearch() dovrebbe mostrare una "Ajax carico grafica" e attendere 2 secondi. Solo se l'evento NON viene attivato nuovamente durante questi 2 secondi, i risultati dovrebbero essere recuperati dal file PHP.

C'è un modo per farlo? Potresti aiutarmi per favore? Grazie in anticipo!

Answer 1

var delayTimer; 
function doSearch(text) { 
    clearTimeout(delayTimer); 
    delayTimer = setTimeout(function() { 
     // Do the ajax stuff 
    }, 1000); // Will do the ajax stuff after 1000 ms, or 1 s 
} 

Answer 2

È sufficiente impostare l'invocazione ritardo con setTimeout(), quindi farla scomparire di nuovo su ogni evento con clearTimeout()

HTML

<form action="" method="post" accept-charset="utf-8"> 
    <p><input type="text" name="q" id="q" value="" onkeyup="doDelayedSearch(this.value)" /></p> 
</form> 

Javascript

var timeout = null; 

function doDelayedSearch(val) { 
    if (timeout) { 
    clearTimeout(timeout); 
    } 
    timeout = setTimeout(function() { 
    doSearch(val); //this is your existing function 
    }, 2000); 
} 

Answer 3

Per questo tipo di cosa che tendono ad utilizzare una funzione astuzia po 'strozzatura' creato da Remy Sharp:

http://remysharp.com/2010/07/21/throttling-function-calls/