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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
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
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
浅析php工厂模式
2014/11/25 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
使用python实现knn算法
2017/12/20 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Python如何将字符串转换为日期
2020/07/31 Python
python实现人工蜂群算法
2020/09/18 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
创业计划书六个要素
2013/12/26 职场文书
师德标兵事迹材料
2014/12/19 职场文书
5.12护士节活动总结
2015/02/10 职场文书
辞职信怎么写
2015/02/27 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
学校德育工作总结2015
2015/05/11 职场文书
2016公司新年问候语
2015/11/11 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
使用Django框架创建项目
2022/06/10 Python