防抖和节流
-
防抖和节流严格算起来应该属于性能优化的知识
-
处理不当或者放任不管就容易引起浏览器卡死
从滚动条监听的例子说起
常见功能:【返回首页】
【返回首页】按钮只会在滚动到距离顶部一定位置之后才出现,那么我们现在抽象出这个功能需求 -- 监听浏览器滚动事件,返回当前滚条与顶部的距离
function showTop(){ var scrollTop = document.body.scrollTop || document.documentElement.scrollTop console.log('滚动条位置' + scrollTop) } window.onscroll = showTop
这个函数的默认执行频率,太高了,我们点击一次键盘的【向下方向键】,会发现函数执行8-9次!高频!!!
防抖(debounce)
基于上述场景,首先提出第一种思路:在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms,然后:
-
如果在200ms内没有再次触发滚动事件,那么就执行函数
-
如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时
效果: 如果短时间内大量触发同一事件,只会执行一次函数。
实现: 计时关键在于setTimeout这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现:
/** * fn[function]需要防抖的函数 * delay[number]毫秒,防抖期限值 */ function debounce(fn,delay){ let timer = null //借助闭包 return function(){ if(timer){ clearTimeout(timer)//正在一个计时过程中,取消该计时,重新开始计时 } timer = setTimeout(fn,delay) } } function showTop(){ var scrollTop = document.body.scrollTop || document.documentElement.scrollTop console.log('滚动条位置' + scrollTop) } window.onscroll = debounce(showTop,1000) **停止滚动1秒以后,才会打印出滚动条的位置**
对于短时间内连续触发的时间(上面的滚动事件),防抖的含义就是让某个事件期限(如上面的1000毫秒)内,事件处理函数只执行一次
节流(throttle)
防抖方案处理问题的结果是:如果在限定时间段内,不断触发滚动事件(比如某个用户闲来无聊,按住滚动不断的拖来拖去),只要不停止触发,理论上就永远不会输出当前距离顶部的距离。
但产品期望:即使用户不断拖动滚动条,也能在某个时间间隔之后给出反馈
设计方案:类似控制阀门一样定期开放的函数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活
效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才能生效。
实现: 这里借助setTimeout来做一个简单的实现,加上一个状态位valid来表示当前函数是否处于工作状态:
function throttle(fn,delay){ let valid = true return function() { if(!valid){ //休息时间 暂不接客 return false } // 工作时间,执行函数并且在间隔期内把状态位设为无效 valid = false setTimeout(() => { fn() valid = true; }, delay) } } /* 请注意,节流函数并不止上面这种实现方案, 例如可以完全不借助setTimeout,可以把状态位换成时间戳,然后利用时间戳差值是否大于指定间隔时间来做判定。 也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在,如果存在表示还在冷却,并且在执行fn之后消除定时器表示激活,原理都一样 */ // 以下照旧 function showTop () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置:' + scrollTop); } window.onscroll = throttle(showTop,1000) 运行结果:如果一直拖着滚动条进行滚动,那么会以1s的时间间隔,持续输出当前位置和顶部的距离