vue实现输入框的模糊查询的示例代码(节流函数的应用场景)


Posted in Javascript onSeptember 01, 2019

上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢?

首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数;

输入框的模糊查询功能原理分析

所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能就是很好的模糊查询的例子;其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况,然后每次用户只要在输入框中输入了信息就触发事件进行查询然后实时展示;原理很简单,但是实现起来会有一些问题,我们可以想想,每输入一个字符都会触发事件,那如果我们需要输入很长的信息呢,那查询是不是就得触发多次?ajax连续多次触发,再加上如果我们的方法体中有操作DOM元素的方法,那么必然会给我们的浏览器进入假死甚至崩溃状态;那么我们有没有办法来解决此类问题呢?答案是:有的;(不了解模糊查询功能的同学可以出门右转去百度首页试一下搜索,给你5分钟,我等你回来)

HTML视图层代码:

<div id="app">



//输入框,绑定输入框的值是变量input_value的值,然后对输入框做了事件绑定keyup,在用户输入的时候会触发
       <input type="text" placehold="请输入id进行查询" v-model="input_value" @keyup="throttle" ref="input"/>
       
         <ul v-show="state">
           <li v-for="(item,index) in list" :key="index" >
            <span>{{item.id}}</span>
            <span>{{item.name}}</span>
            <span>{{item.time}}</span>
         </li>
      </ul>
    </div>

从上述代码中我们可以很明显的看到DOM结构,就是一个输入框,我们给输入框加了ref属性是为了方便我们后面操作DOM拿到输入框的值(详情可见ref和$refs的区别博文https://3water.com/article/167643.htm),然后下面有一个ul列表,不过ul列表是判断展示的;(至于为什么会用v-show而不是v-if,可以点击链接查阅之前的博文https://3water.com/article/168984.htm);

js数据逻辑层代码:

// 实例化 vue对象
    new Vue({
      el:"#app",
      data:{
        input_value:"",
        state:false,
        statu:true,
        dataList:[
        { id: "1001", name: "哈哈", time: "20170207" },
        { id: "1002", name: "呵呵", time: "20170213" },
        { id: "1103", name: "晓丽", time: "20170304" },  
        { id: "1104", name: "小兰", time: "20170112" },
        { id: "1205", name: "财务", time: "20170203" },
        { id: "1206", name: "嘻嘻", time: "20170208" },
        { id: "1307", name: "测试", time: "20170201" }
       ],  
         list:[]
    },
    
    methods:{//触发keyup事件之后触发的方法
      search(){


//这个变量主要是用来测试节流后和不节流的区别





var i=0;





console.log(i++);

//定义的新数组存放筛选之后的数据
        this.list=[];
        //拿到当前input输入框输入的值
        this.input_value=this.$refs.input.value;
        //判断展示ul列表,如果输入了就展示没输入就不展示
        if(this.input_value.length>0){
          this.state=true;
        }else{
          this.state=false;
        }
        
        //循环模拟数据的数组
        this.dataList.map((msg)=>{
          //拿当前json的id、name、time去分别跟输入的值进行比较
          //indexOf 如果在检索的字符串中没有出现要找的值是会返回-1的,所以我们这里不等于-1就是假设输入框的值在当前json里面找到的情况
          if(msg.id.indexOf(this.input_value)!=-1  || msg.name.indexOf(this.input_value)!=-1 || msg.time.indexOf(this.input_value)!=-1){
            //然后把当前json添加到list数组中
            this.list.push(msg);
          }
        })
      },
    }
  })

js数据逻辑层代码其实不难,主要就是给input绑定了keyup事件,在用户输入的时候会触发search事件,用户每输入一个字符都会触发一次;然后我们通过this.$refs.input.value来获取输入框当前的值并赋值给变量this.input_value,然后我们对this.input_value的长度进行判断来实现对用户是否输入的判断,如果用书输入了我们就把v-show绑定的值state赋值给true,反之则赋值为false;然后我们来用ES6的map方法来循环我们的dataList数组,dataList数组的数据是模拟后台接口数据,通过indexOf方法是否等于-1来进行判断当前json里面是否有输入框中输入的数组,indexOf是javascript提供的操作字符串方法,调用方式:string.indexOf("要查询的值"),如果str中没有要查询的值会返回我们-1,如果有会直接返回给我们查询数据的当前下标;所以我们可以借助indexOf是否等于-1来进行判断当前json中是否有我们要查询的字符串;如果有的话,我们只需要把当前json添加到空数组list中即可,然后li绑定list展示;

效果图如下:

vue实现输入框的模糊查询的示例代码(节流函数的应用场景)

到这里我们就可以看到我们要的模糊查询功能已经实现了,但是我们上面讲到模糊查询会影响浏览器的性能,从控制台输入的变量i的值可以看到我们的search方法已经被调用了8次,我们输入的字符越长被调用的次数越多,如果方法里面有操作DOM的行为性能影响会更严重;所以我们现在来加上节流函数来看看:

//节流函数
      throttle(){
        //保持this的指向始终指向vue实例
        var that=this;
        if(!that.statu){
          return;
        }  
        that.statu=false;
        setTimeout(function(){
          console.log(new Date());
          that.search();
          that.statu=true;
        },1000)
      },

我们把我们写的节流函数封装在throttle里面执行,把@keyup绑定的点击事件修改为throttle,当用户输入字符的时候触发节流函数;

效果图如下:

vue实现输入框的模糊查询的示例代码(节流函数的应用场景)

我们可以从控制台很清晰的看到当我们使用节流函数的时候,当我们输入了8个字符我们的方法只执行了两次,并且执行时间是每隔一秒执行一次,一个方法执行2次肯定会比执行8次不管是在效率还是在性能方面都会是比较大的提升,用了节流函数之后相对上面没用的节流函数来说,我们极大的实现了性能提升、优化,所以在高频率触发的事件中我们是可以建议用节流函数来进行控制和解决问题的;

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
Bootstrap基础学习
Jun 16 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
vue中的v-if和v-show的区别详解
Sep 01 #Javascript
react中Suspense的使用详解
Sep 01 #Javascript
vue 实现微信浮标效果
Sep 01 #Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 #Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 #Javascript
vue动态子组件的两种实现方式
Sep 01 #Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 #Javascript
You might like
用文本作数据处理
2006/10/09 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
PHP 验证登陆类分享
2015/03/13 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
JS获取父节点方法
2009/08/20 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Python绘制七段数码管实例代码
2017/12/20 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
美国保健品专家:Life Extension
2018/05/04 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
倡议书范文
2014/04/16 职场文书
学生会主席演讲稿
2014/04/25 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
如何写好闭幕词
2019/04/02 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android