事件节流防抖是为了解决开发过程中遇到的性能问题，常见于onscroll、onresize、频繁点击按钮等事件节流设置一个时间间隔，在时间间隔内只允许执行一次，就像客运站的公交车，到了才走。问题：多年前遇到一个onresize问题，页面是全屏布局，很多模块的dom结构比较复杂。因此，当窗口大小频繁快速变化时，页面响应异常卡顿。解决方案：说实话，我意识到这是一个性能问题，但我不知道如何解决。找了很多相关的问题，最后在https://stackoverflow.com上找到了。不幸的是，我忘记了具体的链接。不过也是因为这个问题，让宋辞爱上了这个网站，而且这个问题的回答也很靠谱。//解决问题的原理是事件节流window.onresize=()=>{console.log('resize')}摇几下就执行了150多遍，这才是卡顿的根本原因.为了解决这个问题，我们需要减少执行次数。lettimer=nullwindow.onresize=()=>{console.log(timer)if(!timer){timer=setTimeout(()=>{callBack()timer=null},1000)}}functioncallBack(){console.log('resize')}这样一秒内不管我们摇多少次，callBack只执行一次，问题就解决了。接下来我们封装一下。//在封装之前，我们先想一想。既然是封装的，事件不一定都是。onesize和interval时间必须由用户设置，callBack必须由用户自己写。**其实我们只关心callBack，以及执行间隔时间。正好事件有回调函数callBack(){console.log('resize')}functionthrottle(callBack,ti??me){lettimer=null//timerstatusshouldbeconstant在内存中，这里是一个闭包返回函数(){if(!timer){timer=setTimeout(()=>{callBack()timer=null},time)}}}window.addEventListener('resize',throttle(callBack,1000),false)测试完美！事件防抖常用于防止刷验证码。频繁的按钮点击导致多次请求对服务器造成压力。代码策略是事件在事件结束后的一段时间内只执行一次。在一段时间内再次触发重新定时。黑车一直喊到一个人上车就走，你上车他就一直喊到一个人上车就走。..看代码有点乱。//要求是输入内容暂停1000ms后触发回调letoInput=document.querySelector('input')//oInput.addEventListener('input',function(e){////如果直接发送一个每次onInput请求都会导致性能问题//console.log(e,this)//})oInput.addEventListener('input',debounce(callback,500))functiondebounce(fn,delay){lettimer=null//绑定上下文thisletself=thisreturnfunction(){letarg=arguments//每次清空定时器clearTimeout(timer)//重新开启定时器，这样只有最后一次执行timer=setTimeout(()=>{//绑定这个并将参数传递给回调。通常我们需要事件对象正常fn.apply(this,arg)},delay)}}functioncallback(e){console.log('trigger',e.target.value)}functioncallback(e){安慰。log('trigger',e.target.value)}输入一大堆内容，最后触发回调，效果完美！您的吐槽或点赞是我的动力！
