防抖和节流严格来说应该算是前端性能优化的知识，但其实遇到的频率还是挺高的，处理不当或者放任不管都容易造成浏览器冻结。例子：很多网站都会提供这样一个按钮：用来返回顶部。滚动到距顶部一定距离后会出现此按钮。功能需求——监听浏览器滚动事件，返回当前滚动条距离顶部的距离functionshowTop(){varscrollTop=document.body.scrollTop||document.documentElement.scrollTop; console.log('滚动条位置:'+scrollTop);}window.onscroll=showTop运行时会发现一个问题：这个函数默认的执行频率太高了！debounce的定义：对于短时间内连续触发的事件，debounce的意思是让事件处理函数在一定时间内只执行一次。基于以上场景，第一种解决方案是：第一次触发事件时，函数不是立即执行，而是在给定一个延迟值比如200ms后执行，然后：如果滚动事件不是200ms内再次触发，则执行函数如果200ms内再次触发滚动事件，则取消当前计时，重新开始计时。结果：如果短时间内触发大量相同的事件，函数只会执行一次。实现：计时函数setTimeout需要一个变量来保存计时。考虑到保持全局纯净，可以借助闭包来实现：functiondebounce(fn,delay){lettimer=null//借助闭包returnfunction(){if(timer){clearTimeout(timer)}timer=setTimeout(fn,delay)//简化写法}}functionshowTop(){varscrollTop=document.body.scrollTop||document.documentElement.scrollTop; console.log('滚动条位置:'+scrollTop);}window.onscroll=debounce(showTop,1000)Throttle(油门)上面防抖方案处理的结果问题是：如果在限定的时间内，不断触发滚动事件（比如用户闲着无聊，不断的按下滚动和拖动拖动），只要不停止触发，理论上当前与顶部的距离永远不会输出。但是，如果期望的解决方案是在一定时间间隔后即使用户一直拖动滚动条也能给出反馈怎么办？分析：我们可以像控制阀一样设计一个周期性开启的功能，即该功能执行一次后，会在一定时间内暂时关闭，过了这段时间再重新开启。作用：如果在短时间内触发大量相同的事件，那么该函数执行一次后，该函数在指定的时限内将不再起作用，直到经过本次时间后才会再次生效.实现setTimeout和状态位valid以指示当前函数是否正在工作：{fn()valid=true;},delay)}}functionshowTop(){varscrollTop=document.body.scrollTop||文档.documentElement.scrollTop; console.log('滚动条位置：'+scrollTop);}window.onscroll=throttle(showTop,1000)结果：*如果一直拖动滚动条滚动，则当前位置到当前位置的距离top会每隔1s连续输出
