前言

在上一篇博文中，我们谈到了节流功能的应用场景，我们知道节流功能可以用于模糊查询、scroller、onresize等场景；今天我们就来说说防抖功能的应用场景：

通过对上一篇博文的学习，我们知道了防抖功能的原理：只有当事件被触发时，加载才会被延迟。如果在延迟加载前再次触发，刷新延迟时间会再次延迟，触发次数只有一次；

如果您对防抖功能原理有疑问，请点击链接跳转到防抖功能讲解的博文：https://www.jb51.net/article/169350.htm

防抖功能一般用于频繁触发事件，但我们只需要它触发一次的场景，比如输入框oninput事件、按钮点击事件、点赞等；

我们今天说的演示场景是验证手机号码的防抖功能：

HTML视图层代码：

Div id=' app '输入类型=' text '占位符='请输入手机号码' v-model=' val ' @ key up=' check '/Div class=' box ' v-show=' status==true '您输入的手机号码格式是正确的/div /div首先，我们的视图图层代码是一个输入框，后跟一个div。

JS数据逻辑层代码：

//这里我们将介绍一个文件，其中防抖功能实现script src=' http : test . js '/script script//实例化vue对象newvue ({el:' # app '，data: {//val是双向数据绑定输入框val: ' '的值，//这里的status值是根据这个. handle修改后面div的提示信息的状态值。Statu: false }、Mounted () {}、Methods: {//Check是我们绑定输入框的@keyup事件。注意不能是函数，否则不会触发，必须是对象check3360去抖(function(){//下面是我们调用的方法。Console.log (new date ())})，handle(){//这里的输入是统计handle事件被触发的次数Console.log(“函数防抖”)；//这里定义的检查规则是let reg=/1[3 | 4 | 5 | 7 | 8][0-9]{ 9 } $/；//验证手机号规则//验证失败返回false，验证通过返回true如果(reg.test(this.val)){//修改状态值便于上面的视图层判断显示this.statu=true//动态修改提示消息document . getelementsbyclassname(' box ')。innerhtml='您输入的手机号码格式错误'；} else { this.statu=falsedocument . getelementsbyclassname(' box ')。innerhtml='您输入的手机号码格式错误'；} }，} })test.js

功能去抖(fn) {//默认为300ms var定时器；返回函数(){ if(timer){ cleartime out(timer)；} timer=setTimeout(()={计时器必须改变这一点，这可以通过应用、绑定或上面的变量转换来改变。//这个指向vue }，1000)；};}最后，我们的渲染如下(这里只是一个简单的模拟效果，视图层不是很漂亮):

我们可以看到，我们的打印结果只输出一次。如果不使用防抖功能，这里会触发11次，因为一共输入了11个字符；假设我们的方法体正在发送ajax和操作DOM？对于一个手机号码验证，我们需要进行11次或更多次ajax请求或DOM操作吗？如果是这样，我们程序的性能是可以想象的，所以防抖功能是一个性能提升方案；

以上是关于我们常用的cdn方式中vue的介绍，那么如何在vue-cli脚手架中使用防抖功能来提升性能呢？

vue-cli:

首先，我们可以在构建文件夹中创建一个新的js文件，在这里我们定义了common.js:

common.js

//功能防抖导出功能去抖(fn，delay){//记录上次延时var timer=nullvar延迟=延迟| | 200；return function() { //var args=引数；变量=这个；//清除最后一个delayer cleartimeout(定时器)定时器=settimeout(函数(){fn。应用(那个)}，延迟)；}}注意：我们在vue-cli中的自定义方法必须通过导出抛出，否则组件无法读取

然后我们介绍并使用我们需要使用的文件：

要使用的组件：

从导入{去抖}./.如果引发，“build/common”必须引入。我们使用import来引用common.js文件中的方法，其中去抖是我们用来接收common.js中的方法的变量；

以与上面相同的方式呼叫：

这里的搜索是视图层绑定的触发事件。请注意，它还需要以对象的形式来调用方法： { search:去抖(function(){ console . log(1234)；}，1000)，}摘要：

1.防抖功能和节流功能都是性能优化方案，有效使用可以提升程序性能和用户体验；

2.防抖功能可以应用于点赞、输入框验证、取消点赞、创建订单等场景。不允许用户同时频繁操作；

好了，这就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。