关于防抖和节流我所知道的

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

关键词：定时器 性能优化 防抖节流

防抖节流解决什么问题？

本质其实就是控制函数在一段时间内被执行的次数。

防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。

比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

开发中最常用的就是防抖，表单输入、提交按钮等。

节流的概念是指一定时间内函数只运行一次。 throttle 会强制函数以固定的速率执行。因此这个方法比较适合应用于动画相关的场景。

比如我们排队做核酸，一个窗口一分钟只能做一个核酸。

开发中最常见的例子就是用户向下滚动无限加载的页面/表格，需要定时检查用户离底部的距离，然后判断是否需要请求数据append 进列表。这种情况防抖就不适合了，防抖是在用户停止滚动时触发，而我们需要在用户到达底部之前酒开始获取数据。

函数防抖

1. 函数在一段时间内多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数。
2. 在等待时间内触发此函数，则重新计算等待时间。

函数节流

1. 在操作结束后才执行
2. 如果超过了设定的时间，就执行一次处理函数。

react hooks 如何实现？

Vue 实现防抖

不要直接在组件的 method 选项中创建防抖函数，然后在 template 中调用这些方法作为事件处理器。

原因是组件使用 export default { ... } 导出的 options 对象，包括方法，会被组件实例重用。如果网页中有 2 个以上的组件实例，那么所有的组件都会应用相同的防抖函数 methods.debouncedHandler 会导致防抖出现故障。

参考资料：

一起围观由React Hooks防抖引发的面试翻车现场

函数防抖与函数节流

Debouncing and Throttling Explained Through Examples 这篇文章写得非常好，例子举得也好。