AJAX: Opóźnienie wyszukiwania w pisaniu w polu formularza

Question

Na mojej stronie używam JavaScript/AJAX do wyszukiwania i wyświetlania wyników, gdy użytkownik wciąż pisze.

HTML (body):

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

JavaScript (nagłówek):

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

Ale może to spowodować wiele żądań przychodzących do serwera.

Dlatego chcę odciążyć serwer poprzez utworzenie opóźnienie:

Ilekroć onkeyup zdarzenie jest zwolniony, funkcja doSearch() powinien pokazać „Graphic ajax ładowanie” i czekać na 2 sekundy. Tylko jeśli zdarzenie NIE zostanie ponownie uruchomione w ciągu tych 2 sekund, wyniki powinny zostać pobrane z pliku PHP.

Czy jest jakiś sposób to zrobić? Proszę, mógłbyś mi pomóc? Z góry dziękuję!

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

Wystarczy skonfigurować opóźnione wywołanie z setTimeout(), a następnie wyjąć go ponownie każdej imprezy z 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

Dla tego typu rzeczy staram się używać chytry mały funkcję „dławienie” stworzony przez Remy Sharpa:

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