js防抖(debounce)与节流(throttle)

前言

防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者不管就容易引起浏览器卡死。

应用场景

诸如碰到resize、scroll、mouseover、setInterval、keydown/keyup/keypress的时候，事件高频触发，导致性能上的问题，造成大量的资源浪费，影响用户体验。

从滚动事件的例子说起，

比如一个常见的应用场景，

1.实现返回顶部顶部功能，当鼠标向下滚动到一定位置，显示返回顶部按钮，向上滚动回去按钮消失，监听浏览器滚动事件，取得距离浏览器顶部距离，这个需求很简单，代码实现如下

componentDidMount() {

let box = document.getElementById('box');

// 挂载滚动监听

box.addEventListener('scroll', this.handleScroll);

}

componentWillUnmount() {

let box = document.getElementById('box');

// 移除滚动监听

box.removeEventListener('scroll', this.handleScroll);

}

handleScroll = e => {

let scrollTop = e.target.scrollTop;

console.log('scrollTop', scrollTop);

};

render() {

return (

列表3232

</div>

);

}

运行就发现一个问题，频率太高了！

然而实际上我们并不需要如此高频的反馈，毕竟浏览器的性能是有限的，不应该浪费在这里，步入正正题，讨论如何优化这种场景。

防抖（debounce）

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

- 如果在1s内没有再次触发滚动事件，那么就执行函数。
- 如果在1s内再次触发滚动事件，那么当前的计时取消，重新开始计时。

效果：如果短时间内大量触发同一事件，只会执行一次函数。

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

debounce = (fn, delay) => {

let timer = null;

return () => {

if (timer) {

clearTimeout(timer); //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时

}

timer = setTimeout(fn, delay);

};

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

到这里，已经把防抖实现了，现在给出定义：

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

节流（throttle）

继续思考，使用上面的防抖方案来处理问题的结果是：如果在规定时间段内，不断触发滚动事件，只要不停止触发，理论上就永远不会输出当前距离顶部的距离。

但是如果产品同学的期望处理方案是：即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈呢

其他应用场景

1、input事件搜索框，例如要支持输入实时搜索，根据用户输入的内容去查询服务器数据，可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使用哪种方案要看业务需求。

2、resize事件，常见于根据浏览器窗口做适配的时候，（一般采用防抖，因为只需最后判断最后一次的变化情况）

js防抖(debounce)与节流(throttle)

猜你喜欢