js实现自动筛选与优化

蔚落 2021-11-26 08:04 204阅读 0赞

在使用js实现自动筛选过程中，由于数据较少，没有考虑数据展示速度问题。后期数据较多时出现页面延迟响应，这时发现展示方式可待优化，过程如下：

**优化前：**

function filterList(list) \{  
    $('\#js-maidianId').bind('input propertychange', function() \{  
        var filter = $(this).val();//获取文本框输入内容  
        if (filter) \{  
            $matches = $(list).find('td:nth-child(2):Contains(' + filter + ')').parent();//td:nth-child(2)筛选列表第二列  
            $('tbody tr', list).not($matches).slideUp();//不匹配向上滑动，不展示  
            $matches.slideDown();//匹配向下滑动，展示列表  
        \} else \{  
            $(list).find("tbody tr").slideDown();//输入内容为空，展示所有列表项  
        \}  
    \});  
\}

**优化后：**

function filterList(list) \{  
    $('\#js-maidianId').bind('input propertychange', function() \{  
        var filter = $(this).val();//获取文本框输入内容  
        if (filter) \{  
            $matches = $(list).find('td:nth-child(2):Contains(' + filter + ')').parent();//td:nth-child(2)筛选列表第二列  
            $('tbody tr', list).not($matches).hide();//不匹配隐藏  
            $matches.show();//匹配，展示列表  
        \} else \{  
            $(list).find("tbody tr").show();//输入为空，展示所有列表  
        \}  
    \});  
\}

分析原因：在于方法的使用：

其中slideUp()、slideDown()向上、向下滑动，包含了动作，当列表数据过多时，筛选后滑动加载了数据和样式，需要耗费较多时间；而hide()、show()只是隐藏、展示，没有过多的滑动动作，渲染速度较快，当然也没有了滑动的样式效果。所以基于需求选择使用。

发表评论取消回复

表情：

评论列表（有 0 条评论，204人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 实现页面自动关闭

[js 实现页面自动关闭][js _ _] <!DOCTYPE HTML> <html> <head> <title>页面倒计时自动关闭<

拼搏现实的明天。/ 2023年08月17日 16:45/ 0 赞/ 166 阅读

相关 android自动循环筛选,RecyclerView+SnapHelper实现无限循环筛选控件

项目用到横向滑动的单项选择控件。需求如下： 1.选项由后台配置，也就是控件要动态设置宽度；2.每次滑动都要左对齐，并默认选中最左边选项；3.控件可以无限循环。动态设置控件

旧城等待，/ 2022年10月16日 03:56/ 0 赞/ 381 阅读

相关埃氏筛选与线性筛选求素数

//埃氏筛选法复杂度O(nlognlogn) include<bitset> include<map> include<vector>

红太狼/ 2022年08月03日 14:51/ 0 赞/ 194 阅读

相关 JS实现自动刷新

JavaScript强制刷新页面的实现代码 JavaScript刷新页面的几种方法： 1 history.go(0) 2 location.reload()

ゝ一世哀愁。/ 2022年06月10日 11:18/ 0 赞/ 130 阅读

相关自动筛选实现三级联动下拉菜单

要点：当选择一个选项的时候，后面的内容自动变成他自己独有的内容主要运用： 1、$(id).change(function(){}) 2、.show（） 3、

妖狐艹你老母/ 2022年06月08日 09:39/ 0 赞/ 234 阅读

相关机器学习-自动筛选特征

选择属性（weka的书中把特征翻译成属性，那么这里的属性其实也就是指特征了）选择属性的目的: 就是通过搜索数据中所有可能的属性组合，以找到预测效果最好的属性子集。

迈不过友情╰/ 2022年05月30日 02:37/ 0 赞/ 264 阅读

相关 Vue实现商品筛选

记得之前用原生js实现过这个案例，今天又用vue实现了一下，感觉还是vue实现起来要简单一点直接看代码：注释上面有解释（后面有些知识点，代码后面会聊，如果会了，就可以不看哦

灰太狼/ 2022年05月20日 01:25/ 0 赞/ 207 阅读

相关 js 实现自动打字

> 使用js代码使用自动打字案例，记录一下。 > > <!DOCTYPE html> > <html> > <head>

缺乏、安全感/ 2022年04月16日 06:20/ 0 赞/ 250 阅读

相关 JS实现图片自动播放

一、JS实现图片自动播放 1、先看效果图 ![20190625211035378.gif][] 2、完整代码 <!DOCTYPE html> <ht

深藏阁楼爱情的钟/ 2021年12月23日 06:41/ 0 赞/ 284 阅读

相关 js实现自动筛选与优化

在使用js实现自动筛选过程中，由于数据较少，没有考虑数据展示速度问题。后期数据较多时出现页面延迟响应，这时发现展示方式可待优化，过程如下：优化前：

蔚落/ 2021年11月26日 08:04/ 0 赞/ 205 阅读