事件防抖和节流防抖和节流功能是我们经常使用的功能。在实际开发过程中，scroll、resize、click、keyboard等事件很容易被多次触发，频繁触发回调会导致页面卡顿、抖动。为了避免这种情况，需要通过节流和防抖的方式来减少无用的操作和网络请求，这也是面试中经常遇到的问题。需要牢牢把握。防抖和节流的本质是关闭的形式。他们包装事件的回调函数，以保存自由变量的形式缓存时间信息，最后通过setTimeout来控制事件的触发频率。油门：先人说了算。Throttle的中心思想是：无论你在一定时间内触发多少次，我只认第一次，计时结束时给出响应。/***函数节流*作用：对于一段时间内的多次操作，只有第一次触发才会开始计算，计时结束才会给出响应。*场景：比如输入搜索函数*@paramfn需要节流操作的事件函数*@paraminterval间隔时间*@returns{Function}*/functionthrottle(fn,interval=500){letlast=0;returnfunction(...args){letnow=+newDate();}if(now-last>interval){last=now;fn.call(this,args);}};}/***step*接受一个Function，和一个触发间隔时间，默认时间500ms*默认值为0*将多个参数解构成一个参数数组*记录本次触发回调的时间*判断上次触发时间和本次时间的间隔是否大于我们设置的阈值*分配本次触发持续的时间，用于下次判断*使用call调用传入的回调函数并传入参数**/使用:UsethrottlinginonScorll//使用throttle包裹scorll的回调函数，设置间隔时间为1sconstbetter_scorll=throttle(()=>{console.log("Scrolleventtriggered");},1000);document.addEventListenner("scorll",better_scorll);//1s内，不管触发多少次，第一次触发后1s才响应。防抖：最后的人说了算防抖的中心思想是：我等你到底。在一定时间内，无论你触发多少次回调，我都只认最后一次/***函数防抖*作用：对于一段时间内的多次操作，只执行最后一次。*场景：比如点击登录/注册/支付按钮时*@paramfn需要防抖操作的事件函数*@paramdelay延迟时间*@returns{Function}*/functiondebounce(fn,delay=500){让定时器=空；返回函数(...args){if(timer)clearTimeout(timer);timer=setTimeout(()=>{fn.call(this,args);},delay);};}/***接受一个函数，和一个触发间隔，默认时间500ms*timerid默认赋null*将多个参数解构成一个参数数组*判断定时器是否存在，存在则取消定时器*然后创建一个创建一个新的定时器，并为定时器分配id*然后如果再次点击重复上面的操作，直到没有达到延时时间，定时器执行*执行时：使用call调用传入的回调函数并传入参数**/Use:在onScorll中使用防抖//使用debounce包裹滚动回调constbetter_scroll=debounce(()=>console.log("Scrolleventtriggered"),1000);document.addEventListener("滚动",better_scroll);使用Throttle优化Debouncedebounce的问题是太耐心了。试想一下，如果用户的操作非常频繁——他不会等到debounce设置的延迟时间结束再进行下一个操作。所以每一次debounce都会为用户重新生成定时器，回调函数一次又一次的延迟，用户会长时间得不到响应，用户也会对这个页面产生“页面卡死”的感知。为了避免弄巧成拙，我们需要利用Throttle的思路来创建一个“底线”debounce，等着你，但我有我的原则：在延迟时间内，我可以为你重新生成定时器，但只要延迟时间到了，我要给用户一个响应。结合Throttle和debounce的思想，已经被很多成熟的前端库应用在它们增强的throttle功能上。/***增强的节流功能*作用：在延迟时间内多次操作会重新生成定时器，但一旦延迟时间到了就会执行。*场景：比如点击登录/注册/支付按钮时*@paramfn需要防抖操作的事件函数*@paramdelay延迟时间*@returns{Function}*/functionthrottle(fn,delay=500){让最后=0;让定时器=空；returnfunction(...args){letnow=+newDate();}if(now-last
