• 对防抖和节流的理解；
• 防抖和节流的区别；
• 防抖和节流的应用；

理解

节流

理解例子：对于某次搜索框的输入操作，为了更好的用户体验，通常会出现联想的内容，这些联想的内容往往需要进行一次网络请求。如果每输入一个字符就提交一次网络请求，会损耗系统的性能，无论是事件处理或者是服务器的压力。

但是往往不需要这么多次网络请求，也就是说应该在合适的情况下发送网络请求。例如快速输入一个关键字，只会在输入完成后才发送请求；监听在输入后的某个时间，没有再次输入时再发送请求。

防抖就是 在某个时间内，没有再次出发某个函数时，才会真正调用这个函数。

防抖的过程：

• 当事件触发时，相应的函数不会立即触发，而是会等待一定的时间；
• 当事件密集触发时，函数的触发会被频繁的推迟；
• 只有等待了一段时间没有时间出发，才会真正的执行相应函数。

防抖的应用场景：

• 输入框频繁的输入内容、搜索框或者提交消息；
• 频繁点击按钮触发事件；
• 监听浏览器滚动事件，完成某些特定操作；
• 用户缩放浏览器窗口大小事件 resize ；
• …

一般都是密集的事件触发，并且希望触发比较靠后的事件，就可以使用防抖函数 debounce 。

节流

理解例子：在飞机大战游戏中（雷电），即使按下发射子弹的频率非常快，但是子弹也会保持一定的频率来发射。

节流就是 在某个时间内，某个函数只能触发一次。

节流的应用场景：

• 监听页面滚动水岸；
• 监听鼠标移动事件；
• 用户频繁点击按钮操作；
• …

节流一般用于密集的事件触发， 但是不会等待最后一次才触发，而是按照一定的频率进行调用。

参考

• 🧨 JavaScript 防抖与节流

• JavaScript 防抖和节流 - coderwhy 前端面试精讲 (opens new window)

• Debounce – How to Delay a Function in JavaScript (JS ES6 Example) (freecodecamp.org) (opens new window)