节流和防抖

节流和防抖

题目

节流和防抖有何区别？分别用于什么场景？

防抖

防抖，即防止抖动。抖动着就先不管它，等啥时候静止了，再做操作。

例如，一个搜索输入框，等输入停止之后，自动执行搜索。

代码参考 debounce.html

节流

节流，即节省交互沟通。流，可理解为交流，不一定会产生网络流量。

例如，drag 的回调，上传进度的回调，都可以设置一个固定的频率，没必要那么频繁。

代码参考 throttle.html

答案

防抖和节流都用于处理频繁触发的操作，优化操作体验。

触发频率

• 防抖，不固定
• 节流，固定

场景

• 防抖，结果式，即一次调用即可
• 节流，过程式，即需要持续一个过程，一次不够

划重点

• 抓住“触发频率”是否固定，即可抓住重点
• 实际项目推荐使用 lodash