Запуск события на KeyPress слишком загружается CPU

Question

Я использую следующий скрипт, чтобы отфильтровать divs, которые не содержат текст во входящих. (По аналогии с друзьями на 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

Использование только имя класса в качестве селектора способ медленнее, чем, например, удостоверение личности или даже указав имя тега, а также класс. Вы также можете сузить селектор, начиная с идентификатора, примерно так: $('#buddies div.buddy'); (сразу же находит элемент #buddies, тогда ему нужно только сопоставить имена классов элемента), а не только $('.buddy') (который проходит через каждый элемент на странице и пытается совместить имя класса).