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更慢，甚至指定标记名称以及类。您还可以通过以ID开头缩小选择器，如下所示：$('#buddies div.buddy');（立即找到#buddies元素，然后只需要匹配div元素的类名）而不仅仅是$('.buddy')（这是通过页面上的每个元素并尝试匹配类名。）

在KeyPress上触发事件太耗费CPU了

2 个答案: