web-dev-qa-db-ja.com

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

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

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（ヘッダー）：

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

ただし、これにより、サーバーに大量の要求が送信される可能性があります。

したがって、遅延を設定してサーバーを解放したい：

Onkeyupイベントが発生すると、関数doSearch（）は「ajax loading graphic」を表示し、2秒間待機する必要があります。これらの2秒間にイベントが再び発生しない場合にのみ、PHPファイルから結果を取得する必要があります。

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

javascriptajaxformsinput
35
caw
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
}
98
Mike Richards

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);
}
15
Jonas Høgh

このタイプのことのために、私はRemy Sharpによって作成されたcな小さな「スロットル」機能を使用する傾向があります。

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

4
Andy Hume