0

次の厄介なコードがあります。

HTML

<input type="search" id="search_box" />
<div id="search_results"></div>

JS

var search_timeout,
    search_xhr;
$("#search_box").bind("textchange", function(){
    clearTimeout(search_timeout); search_xhr.abort();
    search_term = $(this).val();
    search_results = $("#search_results");

    if(search_term == "") {
        if(search_results.is(":visible"))
            search_results.stop().hide("blind", 200);
    } else {
        if(search_results.is(":hidden"))
            search_results.stop().show("blind", 200);
    }

    search_timeout = setTimeout(function () {
        search_xhr = $.post("search.php", {
            q: search_term
        }, function(data){
            search_results.html(data);
        });
    }, 100);
});

(Zurb のtextchange プラグインを使用)

元のもっと単純なコードで私が抱えていた問題は、それが恐ろしく無反応だったということでした。特に入力が遅くなったり、バックスペースが使用された場合などに、結果が数秒後に表示されます。

私はこれをすべて作りましたが、状況はそれほど良くありません。リクエストが山積み。

私の本来の意図は.abort()、 textchange イベントが再び発生したときに、以前のリクエストがまだ実行されているものをキャンセルするために使用することです（446594 に従って）。コンソールでこのようなエラーが繰り返し発生するため、これは機能しません。

Uncaught TypeError: Cannot call method 'abort' of undefined

私の場合、どうすれば.abort()仕事をすることができますか？

さらに、このアプローチは「リアルタイム」の検索結果を取得するための最良の方法ですか? ユーザーが入力すると結果が表示される Facebook の検索バーによく似ており、非常にすばやく起動するようです。

4

1 に答える 1

1

リクエストを送信する前に、少し時間をおいてください。ユーザーが最後のキーから 100 ミリ秒以内 (または選択した別の時間) に別のキーを押した場合、そもそも要求を送信する必要はありません。

実際にリクエストを送信するときは、リクエストがすでにアクティブかどうかを確認する必要があります。その場合はキャンセルしてください。

例えば

if (search_xhr) {
   search_xhr.abort();
}

取得が成功したら、その変数をリセットすることを忘れないでください。たとえば、search_xhr を削除します。

于 2012-10-08T03:34:20.643 に答える