有echarts使用经验的同学可能遇到过这样的场景，在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的，resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的。还有一个常见的场景在input标签的input事件里请求后端接口，input事件也是连续触发的，假设我输入了“12”就会请求两次接口参数分别是“1”和“12”，比浪费网络资源更要命的是如果参数为“1”的请求返回数据的时间晚于参数为“12”的接口，那么我们得到的数据是和期望不符的。当然基于axios可以做很多封装可以取消上一个请求或者通过拦截做处理，但还是从防抖入手比较简单。
防抖和节流到底是啥
函数防抖（debounce）
解释：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。
案例：持续触发scroll事件时，并不立即执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发一次handle函数。
function debounce(fn, wait) { let timeout = null return function() { if(timeout !== null) clearTimeout(timeout) timeout = setTimeout(fn, wait); } } function handle() { console.log(Math.random()) } window.addEventListener('scroll', debounce(handle, 1000))
addEventListener的第二个参数实际上是debounce函数里return回的方法，let timeout = null 这行代码只在addEventListener的时候执行了一次 触发事件的时候不会执行，那么每次触发scroll事件的时候都会清除上次的延时器同时记录一个新的延时器，当scroll事件停止触发后最后一次记录的延时器不会被清除可以延时执行，这是debounce函数的原理
函数节流（throttle）
解释：当持续触发事件时，有规律的每隔一个时间间隔执行一次事件处理函数。
案例：持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。
function throttle(fn, delay) { var prev = Date.now() return function() { var now = Date.now() if (now - prev > delay) { fn() prev = Date.now() } } } function handle() { console.log(Math.random()) } window.addEventListener('scroll', throttle(handle, 1000))
原理和防抖类似，每次执行fn函数都会更新prev用来记录本次执行的时间，下一次事件触发时判断时间间隔是否到达预先的设定，重复上述操作。
防抖和节流都可以用于 mousemove、scroll、resize、input等事件，他们的区别在于防抖只会在连续的事件周期结束时执行一次，而节流会在事件周期内按间隔时间有规律的执行多次。
在vue中的实践
在vue中实现防抖无非下面这两种方法
封装utils工具
封装组件
封装utils工具
把上面的案例改造一下就能封装一个简单的utils工具
utils.js
let timeout = null function debounce(fn, wait) { if(timeout !== null) clearTimeout(timeout) timeout = setTimeout(fn, wait) } export default debounce
app.js
<input type="text" @input="debounceInput($event)"> import debounce from './utils' export default { methods: { debounceInput(E){ debounce(() => { console.log(E.target.value) }, 1000) } } }
封装组件
至于组件的封装我们要用到$listeners、$attrs这两个属性，他俩都是vue2.4新增的内容，官网的介绍比较晦涩，我们来看他俩到底是干啥的：
$listeners: 父组件在绑定子组件的时候会在子组件上绑定很多属性，然后在子组件里通过props注册使用，那么没有被props注册的就会放在$listeners里，当然不包括class和style，并且可以通过 v-bind="$attrs" 传入子组件的内部组件。
$listeners: 父组件在子组件上绑定的不含.native修饰器的事件会放在$listeners里，它可以通过 v-on="$listeners" 传入内部组件。
简单来说$listeners、$attrs他俩是做属性和事件的承接，这在对组件做二次封装的时候非常有用。
我们以element-ui的el-input组件为例封装一个带防抖的debounce-input组件
debounce-input.vue
<template> <el-input v-bind="$attrs" @input="debounceInput"/> </template> <script> export default { data() { return { timeout: null } }, methods: { debounceInput(value){ if(this.timeout !== null) clearTimeout(this.timeout) this.timeout = setTimeout(() => { this.$emit('input', value) }, 1000) } } } </script>
app.vue