AJAX：フォームフィールドの入力の検索の遅延

Question

私のウェブサイトでは、ユーザーが入力している間にJavaScript/AJAXを使用して検索を行い、結果を表示します。

HTML（ボディ）：

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

のJavaScript（ヘッダー）：

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

しかし、これは、サーバーに着信する要求の多くを引き起こす可能性があります。

は、このように私は遅延を設定することで、サーバーを軽減したい：onkeyupのイベントが発生するたびに

は、機能doSearch（）は、「AJAXローディンググラフィック」を表示し、2秒間待つ必要があります。この2秒間にイベントが再開されない場合にのみ、PHPファイルから結果を取得する必要があります。

これを行う方法はありますか？私を手伝ってくれますか？前もって感謝します！

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

のsetTimeout（）と遅れ呼び出しが、その後て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

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