javascript - 防止 javascript 搜索功能减慢浏览器速度

Question

我有一些 javascript/jquery，在搜索框中按“enter”后会遍历所有表格行，然后隐藏那些不适用/不包含字符串的行。然而，这个过程在较慢的系统上是非常费力的，所以我决定实现一个小的加载 gif，这样人们就知道发生了什么事情，即使浏览器似乎已经卡住了。但问题是图像永远不会出现。我假设这是因为浏览器卡住了。那么，现在回答我的问题。我怎样才能使循环更快、使用更少的计算能力并显示 gif？非常感谢

var $rows = $('tbody tr.visall');
$('#search').keydown(function(e) {
    if (e.keyCode == 13){
        $('.load').show();
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

        $rows.show().filter(function () {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(val);
        }).hide();
    };
    $('.load').hide();
});

编辑:此代码经过大约 9000-10000 个 tr 元素。

Answer 1

很难说它是否足够您的数据。但您可以执行以下操作:

1. 减少 dom 操作的数量。您可以添加|删除类 hidden 以显示隐藏行。
2. 如果您的文本是静态的，您可以创建文本缓存，而不是在每次搜索时都提取它。
3. 您可以使用setTimeout 延迟搜索执行以显示正在加载的gif。甚至不确定你是否需要一个。在内存中搜索非常快。

Demo .

代码

$(function() {
    var table = $('#mytable'), //your table
        rows = table.find('tr').map(function(){ //all rows you need
            return $(this);    
        }),
        rowsCache = (function(from){ //text cache
            return from.map(function(){
                return this.text();
            });
        }(rows));

    function delay(func) { //delayed function executor
        setTimeout(func, 13);
    }

    var load = $('#load'); //your loader

    $('#search').keydown(function(e){
        var val;
        if(e.keyCode === 13) {
            val = $.trim($(this).val());
            load.show();
            table.hide(); //release dom
            delay(function() {
                //search in text cache
                var toShow = rowsCache.map(function(_, row) { 
                    return row.indexOf(val) > -1;
                }); 

                rows.each(function(i){ 
                     //simply toggle class let css work for you
                     this.toggleClass('hidden', !toShow[i]);  
                });                
                load.hide();
                table.show();
            });
        }
    });      
});