6

私は自分のサイト用に Facebook スタイルの ajax 検索を作成しました。入力すると、検索結果の下に素敵なリストが表示されます。

$("#s").keyup(function() {
    var searchbox = $(this).val();
    var dataString = 's='+ searchbox;
    if(searchbox!='') {
        $.ajax({
            type: "POST",
            url: "/livesearch.php",
            data: dataString,
            cache: false,
            success: function(html){
                $("#display").html(html).show();
            }
        });
    } else {return false; }  
});

$("body").click(function() {
        $("#display").hide();
});

これの問題は、ユーザーが「サッカー」などの単語を入力するため、少し効果がないことです。これにより、サーバーに対して 8 つの要求が実行されます。これを行うためのより効果的な方法は何でしょうか? 理想的には、インスタントキーアップではなく、検索を行う前にリクエストを1秒間保存する必要があると思います。しかし、それを行う方法が100％確実ではありません...

4

3 に答える 3

10

あなたが参照している方法は「デバウンス」と呼ばれます

通常、すべてのスクリプトの最後に「デバウンス」機能があります

var debounce=function(func, threshold, execAsap) {
    var timeout;
    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };
        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);
        timeout = setTimeout(delayed, threshold || 100); 
    }; 
};

そして、デバウンスの恩恵を受ける何かをするときはいつでも、それを一般的に使用できます

したがって、コードは次のように書き直されます

$("#s").keyup(debounce(function() {
    var searchbox = $(this).val();
    var dataString = 's='+ searchbox;
    if(searchbox!='') {
        $.ajax({
                type: "POST",
                url: "/livesearch.php",
                data: dataString,
                cache: false,
                success: function(html){
                        $("#display").html(html).show();
                }
        });
    } else {return false; }  
}
,350 /*determines the delay in ms*/
,false /*should it execute on first keyup event, 
       or delay the first event until 
       the value in ms specified above*/
));
于 2009-10-14T22:20:26.897 に答える
2

データベースを複数回検索する代わりに、JSON オブジェクトをどこかに置いて検索することができます。1,000 人の友達のリストなどでない限り、過度のオーバーハングは発生しません。

于 2009-10-14T19:11:11.317 に答える
2

もう 1 つのオプションは、2/3 文字の後に検索を開始することです。すべてのリクエストを行う前に 1 秒間待機するのは、私には見栄えがよくありません。また、サーバーに送信するデータをできるだけ少なくして、リクエストとレスポンスを高速化することもできます。

于 2009-10-14T19:08:55.940 に答える