【防抖和节流】

防抖和节流严格算起来应该属于性能优化的知识&＃xff0c;但实际上遇到的频率相当高&＃xff0c;处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。

从滚动条监听的例子说起
先说一个常见的功能&＃xff0c;很多网站会提供这么一个按钮&＃xff1a;返回顶部按钮

这个按钮只会在滚动到距离顶部一定位置之后才出现&＃xff0c;那么我们现在抽象出这个功能需求-- 监听浏览器滚动事件&＃xff0c;返回当前滚条与顶部的距离
这个需求很简单&＃xff0c;直接写:

function showTop () {
var scrollTop &＃61; document.body.scrollTop || document.documentElement.scrollTop;
　　console.log(‘滚动条位置&＃xff1a;’ &＃43; scrollTop);
}
window.onscroll &＃61; showTop
但是&＃xff01;

在运行的时候会发现存在一个问题&＃xff1a;这个函数的默认执行频率&＃xff0c;太&＃xff01;高&＃xff01;了&＃xff01;。 高到什么程度呢&＃xff1f;以chrome为例&＃xff0c;我们可以点击选中一个页面的滚动条&＃xff0c;然后点击一次键盘的【向下方向键】&＃xff0c;会发现函数执行了8-9次&＃xff01;

然而实际上我们并不需要如此高频的反馈&＃xff0c;毕竟浏览器的性能是有限的&＃xff0c;不应该浪费在这里&＃xff0c;所以接着讨论如何优化这种场景。

防抖(debounce)

基于上述场景&＃xff0c;首先提出第一种思路&＃xff1a;在第一次触发事件时&＃xff0c;不立即执行函数&＃xff0c;而是给出一个期限值比如200ms&＃xff0c;

然后&＃xff1a;
如果在200ms内没有再次触发滚动事件&＃xff0c;那么就执行函数
如果在200ms内再次触发滚动事件&＃xff0c;那么当前的计时取消&＃xff0c;重新开始计时

效果&＃xff1a;如果短时间内大量触发同一事件&＃xff0c;只会执行一次函数。

实现&＃xff1a;既然前面都提到了计时&＃xff0c;那实现的关键就在于setTimeout这个函数&＃xff0c;由于还需要一个变量来保存计时&＃xff0c;考虑维护全局纯净&＃xff0c;可以借助闭包来实现&＃xff1a;

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒&＃xff0c;防抖期限值
*/
function debounce(fn,delay){let timer &＃61; null //借助闭包return function() {if(timer){clearTimeout(timer) }timer &＃61; setTimeout(fn,delay) // 简化写法}
}
function showTop () {var scrollTop &＃61; document.body.scrollTop || document.documentElement.scrollTop;console.log(&＃39;滚动条位置&＃xff1a;&＃39; &＃43; scrollTop);
}
window.onscroll &＃61; debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值&＃xff0c;实际使用根据需要来配置


此时会发现&＃xff0c;必须在停止滚动1秒以后&＃xff0c;才会打印出滚动条位置。

到这里&＃xff0c;已经把防抖实现了&＃xff0c;现在给出定义&＃xff1a;

对于短时间内连续触发的事件&＃xff08;上面的滚动事件&＃xff09;&＃xff0c;防抖的含义就是让某个时间期限&＃xff08;如上面的1000毫秒&＃xff09;内&＃xff0c;事件处理函数只执行一次。

节流(throttle)

继续思考&＃xff0c;使用上面的防抖方案来处理问题的结果是&＃xff1a;

如果在限定时间段内&＃xff0c;不断触发滚动事件&＃xff08;比如某个用户闲着无聊&＃xff0c;按住滚动不断的拖来拖去&＃xff09;&＃xff0c;只要不停止触发&＃xff0c;理论上就永远不会输出当前距离顶部的距离。
但是如果产品同学的期望处理方案是&＃xff1a;即使用户不断拖动滚动条&＃xff0c;也能在某个时间间隔之后给出反馈呢&＃xff1f;&＃xff08;此处暂且不论哪种方案更合适&＃xff0c;既然产品爸爸说话了我们就先考虑怎么实现&＃xff09;

其实很简单&＃xff1a;我们可以设计一种类似控制阀门一样定期开放的函数&＃xff0c;也就是让函数执行一次后&＃xff0c;在某个时间段内暂时失效&＃xff0c;过了这段时间后再重新激活&＃xff08;类似于技能冷却时间&＃xff09;。

效果&＃xff1a;如果短时间内大量触发同一事件&＃xff0c;那么在函数执行一次之后&＃xff0c;该函数在指定的时间期限内不再工作&＃xff0c;直至过了这段时间才重新生效。

实现 这里借助setTimeout来做一个简单的实现&＃xff0c;加上一个状态位valid来表示当前函数是否处于工作状态&＃xff1a;

function throttle(fn,delay){let valid &＃61; truereturn function() {if(!valid){//休息时间 暂不接客return false }// 工作时间&＃xff0c;执行函数并且在间隔期内把状态位设为无效valid &＃61; falsesetTimeout(() &＃61;> {fn()valid &＃61; true;}, delay)}
}
/* 请注意&＃xff0c;节流函数并不止上面这种实现方案,例如可以完全不借助setTimeout&＃xff0c;可以把状态位换成时间戳&＃xff0c;然后利用时间戳差值是否大于指定间隔时间来做判定。也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在&＃xff0c;如果存在表示还在冷却&＃xff0c;并且在执行fn之后消除定时器表示激活&＃xff0c;原理都一样*/// 以下照旧
function showTop () {var scrollTop &＃61; document.body.scrollTop || document.documentElement.scrollTop;console.log(&＃39;滚动条位置&＃xff1a;&＃39; &＃43; scrollTop);
}
window.onscroll &＃61; throttle(showTop,1000)


运行以上代码的结果是&＃xff1a;

如果一直拖着滚动条进行滚动&＃xff0c;那么会以1s的时间间隔&＃xff0c;持续输出当前位置和顶部的距离
其他应用场景举例

讲完了这两个技巧&＃xff0c;下面介绍一下平时开发中常遇到的场景&＃xff1a;

搜索框input事件&＃xff0c;例如要支持输入实时搜索可以使用节流方案&＃xff08;间隔一段时间就必须查询相关内容&＃xff09;&＃xff0c;或者实现输入间隔大于某个值&＃xff08;如500ms&＃xff09;&＃xff0c;就当做用户输入完成&＃xff0c;然后开始搜索&＃xff0c;具体使用哪种方案要看业务需求。
页面resize事件&＃xff0c;常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染&＃xff08;这种情形一般是使用防抖&＃xff0c;因为只需要判断最后一次的变化情况&＃xff09;

思考总结
上述内容基于防抖和节流的核心思路设计了简单的实现算法&＃xff0c;但是不代表实际的库&＃xff08;例如undercore js&＃xff09;的源码就直接是这样的&＃xff0c;最起码的可以看出&＃xff0c;在上述代码实现中&＃xff0c;因为showTop本身的很简单&＃xff0c;无需考虑作用域和参数传递&＃xff0c;所以连apply都没有用到&＃xff0c;实际上肯定还要考虑传递argument以及上下文环境&＃xff08;毕竟apply需要用到this对象&＃xff09;。这里的相关知识在本专栏《柯里化》和《this对象》的文章里也有提到。本文依然坚持突出核心代码&＃xff0c;尽可能剥离无关功能点的思路行文因此不做赘述。