什么是防抖？
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 防抖是优化高频率执行js代码的一种手段 你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行。
为什么用防抖？
在日常开发中，我们常常需要考虑很多用户有可能的操作，也需要经常考虑项目的性能问题。比如：有一个按钮，每次点击按钮之后，都会发起一个请求，这时，如果用户对这个按钮疯狂点击，就会极大地浪费资源，降低前端性能；又或者，我们有一个输入框，每输入一个字，都会发送请求给后端，后端返回匹配的人名，这个时候我们考虑性能的问题话，不必立马给后端发送请求，可以说让用户输入停止300ms后再次发送请求。这个时候，我们就可以考虑使用防抖了
怎么用防抖？
在项目中，我们可能用得比较多lodash这个插件，他这个插件的防抖函数，也比较全面，可以立即执行，也可以延迟执行。 在vue项目中，我们会这么直接使用
importdebouncefrom'lodash/debounce';methods:{fn:debounce(function(){//执行操作},200)}他还有第三个参数，是一个对象，里面有两个互斥的属性 leading&trailing leading: 默认为false 为true时，代表延迟前执行 trailing: 默认为true，为true时，代表延迟后执行
代码实现
然后自己实现一个简单的吧
functiondebounce(fn,wait,options){letleading=falseif(isObject(options)){leading=!!options.leading}lettimer,hasOperate//这边我返回的是箭头函数，所以不用新建一个this变量去接收return(...args)=>{//clearTimeout之后，timer还是有值的if(timer)clearTimeout(timer)//如果是立即执行的if(leading){hasOperate=!timertimer=setTimeout(()=>{timer=null},wait)//如果执行过一次之后，hasOperate就变成了true，永远不会再执行了if(hasOperate)fn.apply(this,args)}else{timer=setTimeout(()=>{//用...args,那args就是一个数组fn.apply(this,args)},wait)}}}使用
<div><divid="button1">点击</div></div><script>functionisObject(value){consttype=typeofvaluereturnvalue!=null&&(type==='object'||type==='function')}constbutton1=document.getElementById('button1')functioncl(e){console.log('e',e);returne}button1.addEventListener('click',debounce(cl,1000,{leading:true}))</script>作者：splendid著作权归作者所有。