Javascript 文本过滤器非常慢

我有一张10到1000行的桌子 我有一个文本字段来过滤表。 我使用此代码根据过滤器过滤每行的显示：

$("#cs_name").keyup(function () {
        $(".cs_line").each(function () {
            if (!$(this).data('name').toLowerCase().includes($("#cs_name").val().toLowerCase())) {
                $(this).hide("fast");
            }
            else {
                $(this).show("fast");
            }
        });
    });

如果我有10行或20行的话效果很好，但是当我有1000行的时候，每个字母之间的时间间隔太长了。有时长达5秒

也许有一种方法可以提高效率

请注意，分页不是一个选项，出于某些客户端原因，我不能有多个页面

---

非常感谢您的帮助

我认为更好的选择是使用。它提供了非常快速的多列搜索和其他随时可用的功能

更新： 如果不使用JQuery Datatable，您可以提高存储cs_行元素的性能，而不是每次使用查询选择器进行检索。

从缓存

$（此）

开始。创建

$（this）

对象需要时间，因此创建一个并缓存它：

让$this=$（this）

，然后重用

$this

对于

$（“.cs_line”）

和

$（“#cs_name”）.val（）.toLowerCase（）

来说也是一样的。这些操作中的每一个都需要jQuery访问DOM并创建完整的jQuery对象，而且您已经做了数千次了

另外，调节你的按键，不要在每次按键时都执行过滤器

优化代码：

const $lines = $(".cs_line")
const name = $("#cs_name").val().toLowerCase()
let typeTimeout = null

const applyFilter = () => {
    $lines.each(() => {
        let $this = $(this);
        if ($this.data('name').toLowerCase().includes(name)) {
            $this.show("fast"); // Or just .show(), much faster
        } else {
            $this.hide("fast"); // Or just .hide(), much faster
        }
    });
}

const throttleFilter = () => {
    clearTimeout(typeTimeout);
    typeTimeout = setTimeout(applyfilter, 400) // Will apply the filter if no key is pressed for 400ms
}

$("#cs_name").keyup(throttleFilter);

---

这就是我如何根据数据属性过滤数据，使其快速运行的方法

/*用数据填充表格*/
var trs=$（Array.from（{length:1000}，（）=>Math.floor（Math.random（）*1000））.map（n=>`${n}`）。join（“”）
变量tbody=$（“#tbod”）.append（trs）
/*灌装台末端*/
var lastFilter=“”，//保存上次键入的搜索
rows=tbody.find（“tr”）；//表行
/*规范化数据以开始，这样您就不会在每次检查时都这样做*/
rows.attr（“数据名”，函数（索引，值）{
返回值。toLowerCase（）
})
$（“#过滤器”）。在（“键控”，函数（）{
var currentFilter=this.value.toLowerCase（）；//获取键入的内容并对其进行规范化
//如果最后一个筛选器与当前筛选器不匹配，则需要重置表行
if（！lastFilter | | currentFilter.substring（0，currentFilter.length-1）！==lastFilter）{
行。removeClass（“隐藏”）；
}
//存储下一次迭代的过滤器
lastFilter=currentFilter；
//如果有文本，请对其进行过滤
if（currentFilter）{
//使用CSS选择器查找^is start，对任意位置使用*
trs.not（'tr[data name^=“”+currentFilter+“]”）addClass（“隐藏”）
}
});
.hidden{display:none}

DOM查找和操作很慢，我知道，但我别无选择。我会去掉动画，将要开始的值小写，将
$（“#cs_name”）.val（）存储到变量中。toLowerCase（）
这样你就不会在每次迭代中查找它。Sadely。。。我不能用它。这是一些遗留代码，我不能改变我想要的：（我更新了我的答案，但没有很多事情可以做IMHO@Nicolo请允许我不同意（见我的答案）完美的解决方案现在速度快得难以置信。谢谢lot@Tartempion34希望您知道它使用的是ES6，它不会在所有浏览器中运行。您可能需要将fat arrow语法更改为functions。您是对的，但“并非所有浏览器”是指IE的政治正确术语，所以谁真正在乎呢：）