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

一 : 是什么?

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

定义:

节流 : n秒内只运行一次 , 若在n秒内重复触发 只有第一次生效

防抖 : n秒后在执行该事件 若在n秒内被重复触发 则从新计时

有个经典比喻 :

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

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

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

代码实现

节流

可以使用定时器和时间戳的写法

使用时间戳写法 时间会立即执行 停止出发后没有办法再次执行

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

可以将时间戳写法的特性与定时器写法的特性相结合，实现一个更加精确的节流。实现如下

 

防抖

简单版本

 防抖如果需要立即执行，可加入第三个参数用于判断，实现如下

 

 二 : 区别

相同点 : 

        都可以通过使用 setTimeout 实现

        目的都是 降低回调执行频率 节省计算资源

不同点 :

        函数防抖 : 在一段连续操作后 处理回调,利用 clearTimeout 和 setTimeout 实现 .

        函数节流 ,在一段李连续操作中 没一段时间只执行一次,频率较高的事件中使用来提高性能

        函数防抖关注一定事件连续触发的事件 只在最后一次执行 , 而函数节流一段时间内只执行第一次

三 : 应用场景

       防抖在连续的事件 , 只需触发一次回调的场景有 : 

                搜索框搜索输入 . 只需用户最后一次输入完  , 再发送请求

                手机号 邮箱验证码输入检测

                窗口大小 resize 只需窗口调整完成后 计算窗口大小 防止重复渲染

        节流在间隔一段时间执行一次回调的场景有:

                滚动加载 加载更多或滚动到底部监听

                搜索框 搜索联想功能