本文转载自微信公众号《新钛云服务》，作者方章河。转载本文请联系新钛云服务公众号。在平时的编码过程中，浏览器在注册一段时间后，经常会遇到一些执行次数非常频繁的事件，比如scroll、resize等，事件的频繁执行会导致浏览器进行大量的计算而导致页面卡顿假死的情况下，我们需要一些手段来解决这个问题，所以就有了防抖和节流两种技术。事件限流就是在一定时间内，不管你触发多少回调事件，我只识别第一次，计时结束时响应。至于你后面触发了多少回调事件，我就不回复了。回应。代码实现如下：//fn执行函数，interval是时间间隔的阈值，表示执行多长时间，单位毫秒functionthrottle(fn,interval){//上次触发回调的时间letlast=0returnfunction(){letcontext=thisletargs=argumentsletnow=+newDate()//判断上次触发时间与本次触发时间的时间差是否小于设置的间隔时间if(now-last>=interval){//如果时间间隔大于我们设置的时间间隔阈值，则执行回调last=now;fn.apply(context,args);}}}//滚动事件增加节流constnewScroll=throttle(()=>console.log('scrolled'),1000)文档。addEventListener('scroll',newScroll)事件防抖Debounce和事件节流相反，事件防抖只认最后一次，不管你之前触发过多少次，我不管，我只执行你上次触发事件的回调，代码实现如下：//fn执行函数，delay是执行延迟多长时间，也就是事件触发多长时间，单位是毫秒functiondebounce(fn,delay){lettimer=nullreturnfunction(){letcontext=thisletargs=arguments//每次触发下一个事件时，清除之前的旧定时器if(timer){clearTimeout(timer)}timer=setTimeout(function(){fn.apply(context,args)},delay)}}constnewScroll=debounce(()=>console.log('scrolled'),1000)document.addEventListener('scroll',newScroll)function防抖应用场景连续事件，只需要触发回调场景：搜索框搜索输入。用户只需要完成最后的输入，然后发送手机号和邮箱验证输入检测窗口大小Resize的请求。只需在窗口大小调整完成后计算窗口大小。防止重新渲染。偶尔执行功能节流的场景：滚动加载、加载更多或滚动到底部监控百度搜索框、搜索关联功能高频点击提交、重复表单提交
