携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情 >>

介绍

作⽤：本质上是优化⾼频率执⾏代码的⼀种⼿段

如：浏览器的 resize 、 scroll 、 keypress 、 mousemove 等事件在触发时，会不断地调⽤绑定 在事件上的回调函数，极⼤地浪费资源，降低前端性能

为了优化体验，需要对这类事件进⾏调⽤次数的限制，对此我们就可以采⽤ throttle （防抖）和 debounce （节流）的⽅式来减少调⽤频率

定义：

 •  节流: n 秒内只运⾏⼀次，若在 n 秒内重复触发，只有⼀次⽣效

 •  防抖: n 秒后在执⾏该事件，若在 n 秒内被重复触发，则重新计时

相同点：

 •  都可以通过使⽤ setTimeout 实现

 •  ⽬的都是，降低回调执⾏频率。节省计算资源

不同点：

 •  函数防抖，在⼀段连续操作结束后，处理回调，利⽤ clearTimeout 和 setTimeout 实现。函 数       节流，在⼀段连续操作中，每⼀段时间只执⾏⼀次，频率较⾼的事件中使⽤来提⾼性能

 •  函数防抖关注⼀定时间连续触发的事件，只在最后执⾏⼀次，⽽函数节流⼀段时间内只执⾏⼀次

例如，都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执⾏⼀次。防 抖，则不管调动多少次⽅法，在2s后，只会执⾏⼀次

应⽤场景

防抖在连续的事件，只需触发⼀次回调的场景有：

 •  搜索框搜索输⼊。只需⽤户最后⼀次输⼊完，再发送请求

 •  ⼿机号、邮箱验证输⼊检测

 •  窗⼝⼤⼩ resize 。只需窗⼝调整完成后，计算窗⼝⼤⼩。防⽌重复渲染。

节流在间隔⼀段时间执⾏⼀次回调的场景有：

 •  滚动加载，加载更多或滚到底部监听

 •  搜索框，搜索联想功能

vue中没有内置防抖和节流，但可以使用Lodash库来实现。

官网：lodash.com/

中文文档：www.lodashjs.com/

防抖 API：www.lodashjs.com/docs/lodash…

安装Lodash

npm install lodash --save

yarn add lodash

引入

安装完成之后直接在需要使用的页面引入就可以了。

import debounce from 'lodash.debounce'

使用

场景介绍

什么场景呢，假如说我有一个界面，我拖动浏览器边边，界面变了之后就需要向后台请求数据渲染，这个情况下呢，我不想一变就请求，我想让他每隔一秒钟之后请求新的，不然不停的请求后台不大好。

在 vue 里面的 created 声明周期或者是 mounted 生命周期中写：

this.debouncedCallback = debounce(function () {
  // 请求后台的代码...
}, 1000)

然后在调用的时候就直接 ：

this.debouncedCallback()

就可以了，他会自动帮我们实现防抖功能

这个 lodash 当中有很多方法，防抖啊，节流啊，深浅拷贝啊之类的都有，如果需要可以根据自己的需要使用。