KeyPressでイベントをトリガーするのはCPUが過多です

Question

次のスクリプトを使用して、受信トレイにテキストが含まれていないdivを除外しています。 （Facebookのフレンドタブに似ています）

$('#friend_search_form input').keyup(function(){ 
    var $searchString = $(this).val(); 
    $('.buddy').show(); 
    $('.buddy_name > a:contains('+$searchString+')').closest('.buddy').hide(); 
    console.log($searchString); 
}) 

入力したときに問題が発生するのは、多くのリソースを必要とし、バグが発生することです。

これを書き込むにはどうすればよいですか？

Answer 1

キーを押すたびにコードを実行するのではなく、ユーザーが一定時間入力を停止するまで待ちませんか？

var typingTimeout; 

$('#friend_search_form input').keyup(function(e) { 
    if (typingTimeout != undefined) { 
    clearTimeout(typingTimeout); 
    } 

    typingTimeout = setTimeout(function() {   
    var $searchString = $(this).val(); 

    $('.buddy').show(); 
    $('.buddy_name > a:contains('+$searchString+')').closest('.buddy').hide(); 
    console.log($searchString); 
    }, 500); 
}); 

Answer 2

セレクタは、例えばID、あるいはタグ名と同様にクラスを指定するためのより方法遅いとしてのみクラス名を使用します。 （すぐに#buddies要素が見つかるとすぐにdiv要素のクラス名と一致する必要があります）の$('.buddy')（これは、ページ内のすべての要素を経由します）のようなIDで始めることでセレクタを絞り込むこともできますクラス名の一致を試みます）。