防抖节流函数解析

防抖节流函数的解析

认识防抖和节流函数

防抖和节流的概念其实最早并不是出现在软件工程中，防抖是出现在电子元件中，节流出现在流体流动中

• 而JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。
• 而对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件频繁的发生；

防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题。

但是很多前端开发者面对这两个功能，有点摸不着头脑：

• 某些开发者根本无法区分防抖和节流有什么区别（面试经常会被问到）；
• 某些开发者可以区分，但是不知道如何应用；
• 某些开发者会通过一些第三方库来使用，但是不知道内部原理，更不会编写；

认识防抖debounce函数

我们用一副图来理解一下它的过程：

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

节流的应用场景：

• 监听页面的滚动事件；
• 鼠标移动事件；
• 用户频繁点击按钮操作；
• 游戏中的一些设计；

节流函数的应用场景

很多人都玩过类似于飞机大战的游戏

在飞机大战的游戏中，我们按下空格会发射一个子弹：

• 很多飞机大战的游戏中会有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；
• 比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；
• 但是事件是触发了10次的，响应的函数只触发了一次；

我们按照如下思路来实现：

节流函数的基本实现：可以实现节流效果

• 优化一：节流最后一次也可以执行
• 优化二：优化添加取消功能
• 优化三：优化返回值问题

来源：酒 客