1.初识防抖debounce函数

我们都知道JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。频繁的事件处理会造成性能的损耗，而我们可以通过防抖和节流来限制事件频繁的发生，这节我们先一起来了解防抖函数。

防抖函数其实是在事件频繁触发后，在规定的等待时间内没有再次触发事件就执行响应函数，若触发将重新计时。如下图：

防抖过程图

2.防抖应用场景

其实根据如上防抖过程图，我们知道防抖函数主要减少响应函数的触发次数，所以常用环境有：

• 频繁点击按钮，触发事件。
• 监听浏览器滚动，完成业务。
• 监听输入框内容变化，搜索或提交信息。

3.防抖代码实现

我们将以输入框搜索为例子，来实现具体的基本代码，如下图：

基本实现

3.1 响应函数-参数与this的实现

基本实现图中当oninput事件触发时，调用的响应函数中this应该是input标签对象，而实际效果却是window对象。所以需要显示绑定，把this指向调用事件的对象上，如下图：

通过apply显示绑定this

因为不知函数参数个数，所以我们以arguments或者ES6的剩余参数来实现动态参数。由于arguments是类数组并且包含所有的参数。而函数的剩余参数是Array数组的实例，拥有数组属性与方法，因此将以剩余参数来实现。如下图：

参数实现

3.2 响应函数-立即执行

在立即执行问题1图中，若直接以immediate立即执行标识来判断是否立即执行，当immediate为true时，每次触发都会立即执行。如下图：

立即执行问题1

由于每次触发都立即执行响应函数，所以执行后需要改变immediate标识的值为false，但是这样当立即执行一次后，过了等待时间再次触发，将不会再次立即执行。如下图：

立即执行问题2

因为要解决过了等待时间再次触发时，立即执行响应函数，所以需要定义变量来标识响应函数fn是否执行过。如下图：

立即执行的实现

3.3 响应函数-取消执行

在JavaScript中函数也是对象，所以能挂载属性与方法。如下图：

防抖取消功能的实现

3.4 响应函数-函数返回值

函数返回值可以通过promise与collback实现。防抖中很少会用到返回值，所以了解即可。如下图：

函数返回值

零前端学习输出，一起探讨，一起进步。