Debounceandthrottling(throttle)---解决频繁触发导致页面卡住的事件，会出现页面卡顿。需要优化的常见事件：鼠标事件：mousemove(拖动)mouseover(滑动)mouseWheel(滚动)键盘事件：keydown(按下键盘)keypress(按下字符键盘)keyup(弹出键盘)windowresize/scrollDOM元素动态定位优化方法是控制一段时间内事件处理器的执行次数。防抖频繁（连续）触发事件（比如用户触发输入事件input），不执行目标动作，当事件不再触发时执行。实现思路是，在事件处理器中，用setTimeout包裹目标动作，一直触发事件，然后清空最后一个定时器，不再触发触发事件，最后一个定时器会执行，目标动作会执行一次。JS代码：functiondebounce(callback,delay){lettimeout=0;returne=>{console.log('clear',timeout,newDate());清除超时（超时）；//如果输入一直触发，最后一个定时器会被清零，阻止目标函数的执行，直到事件没有触发事件，最后一个定时器不被清零，延迟时间后定时器会执行，这保证目标函数只执行一次。超时=setTimeout(()=>{回调(e);},延迟);console.log('new',timeout,e.target.value,newDate());};}letprint=debounce(e=>{letvalue=e.target.value;console.log(value,newDate());},1000);document.querySelector('#input').addEventListener('input',print,false);清除定时器的时机很关键。在新的定时器产生之前，如果是之后，会清空所有的定时器，目标函数不会执行一次。节流防抖是一个多次触发的事件，目标函数只执行一次，不管触发这些事件需要多长时间。而节流就是保证目标函数在一段时间内只执行一次，达到目标函数缓慢执行的效果。上面的输入是使用节流实现的：letthrottle=(callback,delay)=>{lettimeout=0;让现在=新日期（）-0；返回e=>{console.log('现在',现在);让last=newDate()-0;清除超时（超时）；if(last-now>=delay){console.log('timeinterval',last-now);回调（e）；now=last;//把上面的执行时间赋值给now}else{//在延迟时间内多次触发事件，合并这里的目标函数执行timeout=setTimeout(()=>{callback(e);}，延迟）;}};};letwrite=throat(e=>{console.log(e.target.value,newDate());},5000);document.querySelector('#input').addEventListener('input',write,错误的）;两者比较节流。在一定时间内，目标函数只能执行一次，限制目标函数的执行频率，无论事件触发多少次；防抖是多次触发事件，目标函数只执行一次，不管这些事件触发了多长时间。节流函数限制了目标函数的执行频率，具有不断变化的效果。它适用于关注变更过程的操作。可以调整目标函数的执行频率，使变化更平滑，比如动画，改变窗口时执行某些操作等。常见事件resize，scroll，mouseWheel，touchmove，mouseover等；防抖功能适合比较注重结果，不太注重操作过程的操作。常见事件包括input、keyup等。最后看看防抖和节流都使用resize事件的效果，可以更好的理解两者的区别：functiondebounce(callback,delay){lettimeout=0;返回e=>{clearTimeout(超时);超时=setTimeout(()=>{回调(e);},延迟);};}letprint=debounce(e=>{letvalue=e.target.value;console.log('debounce',window.innerWidth);},500);letthrottle=(callback,delay)=>{lettimeout=0;让现在=新日期（）-0；returne=>{让last=newDate()-0;清除超时（超时）；if(last-now>=delay){回调(e);现在=最后；}else{timeout=setTimeout(()=>{callback(e);},delay);}};};letwrite=thorttle(e=>{console.log('thorttle',window.innerWidth);},500);window.addEventListener('resize',write,false);window.addEventListener('调整大小'，打印，假）；参考功能节流和功能防抖功能防抖和功能节流
