什么是防抖和节流？有什么区别？如何实现？

一、什么是防抖节流？

本质上是优化高频执行代码的手段

如：浏览器 resize、scroll、keypress、mousemove 事件触发时，会不断调用绑定在事件上的回调函数，大大浪费资源，降低前端性能

为了优化经验，我们需要限制此类事件的调用次数，我们可以使用它throttle（防抖）和debounce减少调用频率(节流)

定义：

• 节流: n 如果只在秒内运行一次，如果只在秒内运行一次， n 秒内反复触发，只有一次生效
• 防抖: n 如果事件在秒后执行， n 秒内重复触发，重新计时

经典比喻：

想象一下每天在大楼下工作的电梯。将电梯运输一次，类比于函数的执行和响应

假设电梯有两种运行策略 debounce 和 throttle，超时设置为15秒，不考虑容量限制

电梯第一个人进来后，15秒后准时运送一次，这是节流。

电梯第一人进来后，等待15秒。如果有人在这个过程中进来，等待15秒再次计时，直到15秒后开始运输，这是防抖。

二、实现代码

#节流

使用时间戳和定时器来完成节流

使用时间戳法，事件将立即执行，触发后无法再次执行

使用定时器写法，delay毫秒后第一次执行，第二次事件停止触发后仍将再次执行

时间戳写法的特点可以与定时器写法的特点相结合，实现更准确的节流。实现如下

防抖

实现简单版本

如需立即执行防抖，可添加第三个参数进行判断，实现如下：

三、区别

相同点：

• 都可以用setTimeout实现
• 目的是降低回调执行频率。节省计算资源

不同点：

• 连续操作一段时间后，处理回调，使用函数防抖clearTimeout和setTimeout实现。函数节流，在连续操作中，每段时间只执行一次，用于提高性能
• 函数防抖关注一定时间内连续触发的事件，最后只执行一次，而函数节流只执行一次

例如，时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 执行一次。防抖，无论调动多少次方法，2s之后，只执行一次。

四、应用场景

在连续事件中，只需触发一个回调场景：

• 搜索框搜索输入。用户只需在最后一次输入后发送请求
• 手机号码，邮箱验证输入检测
• 窗口大小resize。只需调整窗口，计算窗口大小。防止重复渲染。

节流间隔一段时间进行回调的场景有:

• 滚动加载，加载更多或滚到底部监控
• 搜索框，搜索联想功能