前端日常——防抖

一、什么是防抖

指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。总结来说就是 延时执行。防抖的结果是频繁的触发转变为触发一次。

二、应用场景

两个条件：

1. 用户的连续操作会导致频繁的事件回调（执行的逻辑比较复杂或耗时，浏览器的处理跟不上触发，可能会发生卡顿、假死或者事件堆积）

2. 用户只关心“最后一次”操作（停止连续操作后）返回的结果

例如： 搜索框keyup、keydown，频繁改变窗口大小resize，鼠标移动mousemove，收藏点赞等触发时需要请求后台接口的操作。

三、原理

通过定时器将回调函数进行延时，如果在规定时间内继续回调，发现存在之前的定时器，则将该定时器清除，并重新设置定时器。这里有个细节，就是后面所有回调函数都要能访问到之前设置的定时器，这时就需要用到闭包。

四、两种版本

防抖分为两种：

1、非立即执行版：事件触发 ——>延时——>执行回调函数。如果在延时中，继续触发事件，则会重新进行延时，在延时结束后执行回调函数。常见的例子：input搜索框，客户输完过一会就自动搜索。

2、立即执行版：事件触发——>执行回调函数——>延时。如果在延时中，继续触发事件，则会重新进行延时。在延时结束后，并不会执行回调函数。常见例子：对于按钮防点击，例如点赞、收藏等立即有反馈的按钮。

五、代码实现

1、非立即执行版：

2、立即执行版：