33

これは、実際にはアンチパターンであると私が予想する検索ボックスの jQuery であり、私が指摘したいより良い解決策があると確信しています。

コメントはコードよりも明確で単純な場合があるため、コメントで説明してからコードを提供します。

  • // キー押下時の関数呼び出しをセットアップします。
  • // 関数呼び出しは、メイン イベントが発生する前に遅延があります。
  • // keypress 関数が呼び出されると、以前にキューに入れられたイベントを消去し、標準の遅延レートで新しいイベントを作成します。
  • // グローバルを使用して setTimeout ポインターを格納します。
  • // 既存のポインタを clearTimeout します。
  • // 新しい遅延を開始します。

コード：

                // set up a filter function call on keypress.
                $('#supplier-select-filter').keypress(function (){
                    // Currently, resets a delay on an eventual filtering action every keypress.
                    filterSuppliers(.3, this);
                });

                // Delayed filter that kills all previous filter request.
                function filterSuppliers(delay, inputbox){
                    if(undefined != typeof(document.global_filter_trigger)){
                        clearTimeout(document.global_filter_trigger);
                        // clearTimeout any pre-existing pointers.
                    }
                    // Use a global to store the setTimeout pointer.
                    document.global_filter_trigger = setTimeout(function (){
                        var mask = $(inputbox).val();
                        $('#user_id').load("supplier.php?action=ajax_getsuppliers_html&mask="+escape(mask)); 
                    }, 1000*delay); 
                    // Finally, after delay is reached, display the filter results.             
                }

問題点：

検索用語が平均で 10 文字で構成される入力ボックスでは、setTimeout を 0.5 秒で 10 回呼び出すことになります。これはプロセッサに負荷がかかるようです。私のテストでは、いくつかの顕著なパフォーマンスの問題が発生しているため、よりクリーンな方法があることを願っています。別？

.load() は、JSON を取り込んで json から html を生成するよりも簡単ですが、もっと良いツールがあるのではないでしょうか?

.keypress() は、バックスペースの削除やその他の必需品などで常にトリガーされるとは限らないため、おそらくこの入力ボックスで keypress() を使用するのは理想的ではありませんか?

4

3 に答える 3

96

ユーザーが指定された時間入力を停止した後、コールバックを実行する単純な関数である次のアプローチを頻繁に使用します。

$(selector).keyup(function () {
  typewatch(function () {
    // executed only 500 ms after the last keyup event.
  }, 500);
});

実装：

var typewatch = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

このアプローチは非常に単純で、グローバル変数を意味するものではないと思います。

より高度な使用法については、jQuery TypeWatch Pluginを参照してください。

于 2010-02-08T06:34:38.050 に答える
3

最高品質のjQuery商品の提供者であるZurbの優れたTextChangeEventプラグインをご覧ください。

于 2011-06-28T19:35:00.877 に答える
0

これは、プラグインを使用せずに行うより良い方法です。

var timeout;
$('input[type=text]').keypress(function() {
if(timeout) {
    clearTimeout(timeout);
    timeout = null;
}

timeout = setTimeout(myFunction, 5000)
})
于 2014-02-26T09:58:34.773 に答える