一.防抖的定义

防抖本质上是优化高频率执行代码的一种手段，如：浏览器的 resize scroll keypress mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能

为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle(防抖)的方式来减少调用频率

防抖:n秒后在执行该事件，若在n秒内被重复触发，则重新计时。用户高频事件完了，再进行事件操作

二.防抖的应用场景

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测onchange /oninput事件
• 窗口大小计算。只需窗口调整完成后，计算窗口大小。防止重复渲染

三.为什么要防抖?

• 有的操作是高频触发的，但是其实触发一次就好了，
• 比如我们短时间内多次缩放页面，那么我们不应该每次缩放都去执行操作，应该只做一次就好。
• 再比如说监听输入框的输入，不应该每次都去触发监听，应该是用户完成一段输入后在进行触发。

总结：等用户高频事件完了，再进行事件操作。

四.防抖设计思路:

事件触发后开启一个定时器，如果事件在这个定时器限定的时间内再次触发，则清除定时器，在写一个定时器，定时时间到则触发。

代码如下

关键点1是对于this的保留 以方便后面返回的函数this指向正确的内容

关键点2是对定时器的清除 如果存在还未关闭的定时器 就清除 重新开始计时 达到只在最后一次触发的效果

五.应用案例

搜索框输入：当用户在搜索框中输入文本时，通常会有一些实时搜索建议 使用防抖可以确保只有在用户停止输入一段时间后才触发搜索请求，避免因为快速连续输入而导致的大量请求

代码如下

当用户在搜索框中输入文本时，会触发 input 事件 我们绑定了一个防抖后的 showSuggestions 函数到这个事件上，这样当用户停止输入1500毫秒后，showSuggestions 函数才会执行，以此来模拟获取搜索建议的过程