上一篇文章讲了javascript的节流功能和防抖功能，那么在实际情况下应该如何使用呢？

首先我们来了解一下：节流功能是先节流，是为了节省流量和内存损失，以提升性能为目标，会用在高频事件中，比如onresize、onmousemove、onscroll、oninput等等；

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

所谓模糊查询，是指无需用户完整输入或全部输入信息即可提供查询服务，即用户在输入的同时就能看到提示信息(实际上是找到了匹配的信息)，百度的搜索功能就是模糊查询的一个很好的例子；其实模糊查询的原理是将oninput事件绑定到输入框中，监控用户输入情况，然后每次用户在输入框中输入信息时，触发事件进行查询，然后实时显示；原理很简单，但是实施起来会有一些问题。我们可以考虑一下。每个字符输入都会触发一个事件。如果我们需要输入长信息，查询是否需要多次触发？Ajax连续触发多次，如果我们的方法体中有操作DOM元素的方法，必然会让我们的浏览器进入假死甚至崩溃的状态；那么有什么办法可以解决这种问题呢？答案是：有；(不懂模糊查询功能的同学可以出去右转百度主页试试搜索，给你5分钟，我等你回来)

HTML视图层代码：

Div id='app'/输入框，绑定输入框的值为变量input_value的值，然后对输入框进行事件绑定keyup。将触发输入类型='text' placehold='请输入id以查询' v-model=' input _ value ' @ key up=' throttle ' ref=' input '/ulv-show=' state ' liv-for='(项，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://www.jb51.net/article/167643.htm的区别)，然后下面有一个ul列表，但是ul列表是判断显示的；(至于为什么用v-show代替v-if，可以点击链接查看之前的博文https://www . JB 51 . net/article/168984 . htm)；

js数据逻辑层代码：

//实例化vue对象newvue ({el:' # app '，data: {input _ value: ' ')，state: false，statu3360 true，datalist3360 [{id3360' 1001 '，name:' haha '，Time: '20170304'}，{ ID : ' 1002 '，Name 3360 ' hehe '，Time : ' 220//定义的新数组存储过滤后的数据this . list=[]；//获取这个的值。input _ value=这个。参考文献。在当前输入框中输入的值；//判断显示ul列表，如果是输入，显示if (this。input _ value.length0) {this。state=true} else { this.state=false}//循环模拟数据的数组this.dataList.map((msg)={ //取当前json的id、名称、时间分别与输入值进行比较。//如果您要查找的值没有出现在检索到的字符串中，indexOf将返回-1，所以如果输入框的值是在当前JSON(msg . id . index of)=-1 | | msg . name . indexOf(this . input _ value)！=-1 | | msg . time . indexof(this . input _ value)！=-1){ //然后将当前json添加到list数组中的this.list.push(msg)中；} }) }，} })js数据逻辑层代码其实并不难，主要是绑定一个keyup事件进行输入，当用户输入时会触发一个search事件，并且每次用户输入一个字符；然后我们通过这个得到输入框的当前值。$refs.input.value并将其赋给变量this.input_value。然后我们判断这个. input_value的长度来判断用户是否输入。如果我们用一本书输入它，我们把v-show绑定值状态赋值为true，否则赋值为false。然后我们使用ES6的映射方法来循环我们的dataList数组。dataList数组的数据是模拟后台接口数据。json中输入框是否有数组输入是通过indexOf方法是否等于-1来判断的。indexOf是javascript提供的操作字符串方法。调用方法是string.indexOf('要查询的值')。如果str中没有要查询的值，它将返回us -1，如果有，它将直接返回给我们当前的查询数据。因此，我们可以通过indexOf是否等于-1来判断当前json中是否有我们想要查询的字符串；如果是，我们只需要将当前json添加到空数组列表中，然后li绑定列表显示；

效果图如下：

这里可以看到我们想要的模糊查询功能已经实现了，但是我们提到模糊查询会影响浏览器性能。从控制台输入的变量I的值，我们可以看到我们的搜索方法已经被调用了八次。我们输入的字符越长，调用的次数就越多。如果方法中有操作DOM，行为性能会受到更严重的影响；现在让我们添加节流功能，看看：

//throttle函数throttle(){ //保持这一点始终指向vue实例var，即=thisif(！that . statu){ return；} that.statu=falsesetTimeout(函数(){ console . log(new Date())；that . search()；that.statu=true}，1000)}，我们封装我们在throttle中编写的throttling函数来执行，修改@keyup绑定的click事件来throttle，当用户输入字符时触发throttling函数；

效果图如下：

从控制台上我们可以清楚地看到，当我们使用节流功能时，当我们输入8个字符时，我们的方法只执行两次，执行时间是每隔一秒一次。与执行八次方法相比，执行两次方法肯定会提高效率和性能。使用节流功能后，相比于上面无用的节流功能，我们在性能上有了很大的提升和优化，所以我们可以建议在高频触发的事件中使用节流功能。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。