1

私は AJAX と JavaScript に比較的慣れておらず、onkeyup イベントを使用して検索候補を生成するために ajax を使用しています。タイマーを使用して ajax リクエストの数を調整し、中止機能を使用してパフォーマンスを向上させようとしています。これら 2 つの機能を使用したことがないため、正しく設定されているかどうかわかりません。誰かが見て、これらの機能で正しい軌道に乗っているかどうかを教えてくれるかどうか疑問に思っていましたか? よろしくお願いします。

            var ajaxReq = null;  
        $(".prod-name-input").keyup(function(){
            searchword = $(this).val();
            //alert(searchword);
            if((searchword.length) > 3) {
                clearTimeout(timer);
                timer = setTimeout(function(){
                    if (ajaxReq != null) ajaxReq.abort();
                    var ajaxReq =  $.ajax({
                                        url: "invoice-get-data.php?searchword=" + searchword,
                                        dataType: "html",
                                        success: function(data){
                                           $(".smart-suggestions").html(data);
                                        }
                                    });
                }, 350);
            }
        });
4

1 に答える 1

5

スロットリング/デバウンスに関する Ben Alman の優れた記事 ( http://benalman.com/projects/jquery-throttle-debounce-plugin/ ) をご覧になることをお勧めします。

達成したいのはデバウンスであるため、Ben Alman のプラグインを使用すると、以下を使用できます。

var ajaxReq = null;  

$(".prod-name-input").keyup($.debounce(350, function(){
    searchword = $(this).val();

    if((searchword.length) > 3) {
        if (ajaxReq != null) ajaxReq.abort();
        ajaxReq =  $.ajax({
            url: "invoice-get-data.php?searchword=" + searchword,
            dataType: "html",
            success: function(data){
                $(".smart-suggestions").html(data);
             }
        });
    }
}));

編集 ：

実際、あなたの場合、それはデバウンスであり、抑制ではありませんでした。

jsfiddle を追加しました: http://jsfiddle.net/scaillerie/2AFp3/。

于 2012-12-16T15:25:51.460 に答える