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

很难说它对您的数据是否足够。但是你可以做到这一点：

减少dom操作量。您可以添加|删除类hidden以显示隐藏行。
如果您的文字是静态的，您可以创建文本缓存，不要在每次搜索时提取它。
您可以使用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();
            });
        }
    });      
});

Answer 2

我个人会说删除filter并使用CSS选择器，然后它只是基本的DOM操作，jQuery应该优化。

有关文档，请参阅http://api.jquery.com/contains-selector/，这里有点http://jsfiddle.net/tgz5X/

以下是我在小提琴中使用的一个简单例子

function search(mySearchValue) {
    $("tr > td:contains(" + mySearchValue + ")").show();
    $("tr > td:not(:contains(" + mySearchValue + "))").hide();    
}

你需要更多，但你应该了解这种方法背后的想法。

或者使用filter但仍然使用选择器，这也可能会触发hide元素，在更多DOM操作之后将会show

$("tr td").hide().filter(":contains(" + mySearchValue + ")").show();

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

2 个答案: