0

私はこのような入力検索を持っています:

<input type="search" autocomplete="off" name="searchSchools" id="searchSchools" value="" onKeyUp="searchSchools(this.value)" />

おわかりのように、onKeyUp イベントが発生するたびに、"searchSchools" という名前の関数を呼び出します。この関数では、PHP の入力検索の現在の値に一致する学校を検索し、それらを JSON 形式で返します。問題は、高速で入力すると複数のリクエストがPHPページに送信され、これを防ぎたい、この関数によって行われた同じページへの他のリクエストがない場合にのみ、投稿リクエストをページに送信したい。

関数は次のとおりです。

function searchSchools(name){
    $.post("search-schools.php", { name: name },
    function(data) {
        //-> Here i do whatever with data returned
    }, 
    "json"
    );
}
4

3 に答える 3

3

に遅延を追加し$.postます..以下のように試してください、

var timer = null, xhrReq = null;
function searchSchools(name){
    if (timer != null) {
       clearTimeout(timer);
    }

    timer = setTimeout(function () {
        if(xhrReq != null) {
           xhrReq.abort(); //to kill all prev request and take the latest
        }

        xhrReq = $.post("search-schools.php", { name: name },
           function(data) {
              //-> Here i do whatever with data returned
           }, 
           "json"
         );
    }, 1000); //will be posted only after 1 second.
}

編集：xhr.abort()古いリクエストを中止し、最新のリクエストのみを検討するために追加されました。

于 2012-05-21T18:30:15.203 に答える
0 
var request;
function searchSchools(name){
    if (!request) {
       request = $.post("search-schools.php", { name: name },
       function(data) {
           request = false;
           //-> Here i do whatever with data returned
       }, 
       "json"
       );
    }
}
于 2012-05-21T18:31:51.723 に答える
0

OPに関する最初のコメントで指摘した動作が必要ないと仮定すると

私はこの種の問題にもっと無駄な方法でアプローチするのが好きです:

var xhr;
function search(term) {
    if (xhr) {
        xhr.abort();
    }

    xhr = $.post(...);
}

これにより、中止されたリクエストの成功コールバックが呼び出されず、実際の入力に関する最新の結果が常に得られるため、基本的なロジックの処理がはるかに簡単になります。

潜在的に多くのリクエストを開始および中止することに警戒している場合は、適切なキーイベントにスロットルを導入して、懸念の分離も実現します。

スクリプトxhrに適切なコンテキストを指定します。この例ではグローバルです。あなたはそれを避けたいです。

EDIT1 - 追加:

xhr設定が解除されることはありません。completejQuery AJAX 設定オブジェクトのハンドラーでこれを行うことができます。一方、abort()中止または完了したリクエストの呼び出しは、実際には NOP です。

于 2012-05-21T18:43:16.670 に答える