javascript - 是否可以优化 Javascript 客户端搜索？

Question

这是我用来对无序列表的元素进行排序并根据用户查询删除它们的 jQuery/Javascript 代码:

// event binding for the search filter
$('.search-box').keyup(function(){
    var query = $(this).val().toLowerCase(),
        length = query.length;

    $('.friends-list li').each(function(){
        if(query.length > 1 && $(this).find('span').text().toLowerCase().substring(0, length) != query){
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

不幸的是，当我获得大量 li 元素时，速度会大大降低，有时会卡在系统上。有没有办法对此进行优化，或者先进行所有搜索，然后一次删除所有 li 元素，这样系统就不会挂起？

当我进行服务器端搜索时，我只能有一个加载微调器和一个成功回调，但似乎不适用于客户端。

Answer 1

一些小技巧

不要在每个 keyup 事件上触发搜索。相反，有一个较短的计时器(~200 毫秒)等待下一个按键，如果没有则开始搜索:

 keyup:
      clearTimeout(searchTimer)
      searchTimer = setTimeout(doSearch, 200)

如果query.length <=1你的循环可以被优化掉，不需要在每次迭代中检查。

each(li)...find(span)开销太大了。尝试直接遍历跨度:

$('.friends-list li span').each(function() {
    var p = $(this);
    if(p.text().toLowerCase().indexOf(query) !== 0) {
        p.parent().hide();
    } else {
        p.show();
    }
});

还要注意上面代码中的一些小优化。