手摸手解析JS手写面试题题系列1——实现debounce（防抖）方法
关注程序员耳东，编程转码真轻松
这是手摸手解析JS手写面试题系列第1篇，聊聊如何实现debounce（防抖）方法
啥是debounce（防抖）
首先说说啥是debounce， 这个单词中文名就是防抖，之前没接触过的人可能一脸蒙
不过没关系我最擅长的就是通俗易懂的解释清楚概念，我一说你就明白了
举个例子，比如说这样一个场景：
比如下图这样，用户在输入框里面输入字符，然后根据用户输入的字符去后端模糊查询，这是个很常见的场景对吧？这就是经常说到的联想搜索
OK，我们继续探究这个功能的细节
比如你想搜索“世界杯”这三个字，普通的联想输入框是这样运作的：
- 在你敲入第一个字的时候，触发了输入框的onchange事件，前端带着“世”这个字向后端发起1次请求
- 在你敲入第二个字的时候，触发了输入框的onchange事件，前端带着“世界”这两个字向后端发起1次请求
- 在你敲入第三个字的时候，触发了输入框的onchange事件，前端带着“世界杯”这三个字向后端发起1次请求
你品一品，用户飞速的敲完3个字，前端居然发起了3次请求，这合理吗？难道我们不是只需要第3次请求就够了吗？
能不能有一个办法可以让用户停止输入的时候才执行发请求的方法，避免用户在快速输入的时候连续的发请求？
答案就是debounce方法，它可以让某个方法在快速连续被激发的时候不会执行，可以保障用户在输入完毕时才去真正的执行方法
接下来，我们一步一步用代码实现debounce方法
跟我一步一步代码实现debounce（防抖）
写测试的例子
在开始写debounce之前，我们先把验证的代码写好，这样子就可以保证我们写一点代码就可以验证一点代码
记住一点就是，很少有人可以一次性就写出最佳的代码，大部分都是先写个最简单最糙的版本然后一点一点的优化出来的
验证的代码我们就以前面说到的输入框为例，写一个方法来响应input的onChang事件，假装发起了请求，来显示onChang事件的响应频率 测试代码如下：
<body>
<input id="debounce-input" placeholder="防抖输入框" />
<script>
const input = document.getElementById('debounce-input');
const handleInputOnChange = (e) => {
console.log(e);
console.log('发起请求...');
}
input.oninput = handleInputOnChange;
</script>
</body>
先思考伪代码
我们写一个代码之前呢，先要把它想清楚，只要你想顺了，那代码写的就很顺了，在思考代码逻辑的过程中可以使用伪代码来辅助
什么是伪代码，就是我们使用人话来把我们想要实现的代码过程和步骤讲一遍
OK，思考debounce伪代码之前先看看它是怎么用的
const handleInputOnChangeDebounced = debounce(handleInputOnChange, 300);
input.oninput = handleInputOnChangeDebounced;
这段代码的意思就是我们使用debounce方法把handleInputOnChange方法包装一下，并且返回一个新的方法handleInputOnChangeDebounced
这个handleInputOnChangeDebounced方法响应输入框的输入事件，在用户以非常快的速度（两次输入的间隔时间小于300毫秒）输入的时候，不会去执行handleInputOnChange方法，只有在用户两次输入间隔大于300毫秒才会执行handleInputOnChange方法
这里有个细节需要注意，什么情况下用户两次输入间隔会小于300毫秒，有两种情况：
- 用户打字的手速比较慢，两次输入的间隔大于了300毫秒，此时因为用户手速实在是太慢了，我们不需要很刻意的去做debounce，所以每次输入后都会执行一次handleInputOnChange
- 用户手速很快的打完了一段文字并且停止了输入，此时最后一次输入完毕后过300毫秒就会执行handleInputOnChange
再开始写代码
OK，我们接下来写代码
首先实现一个最基础的debounce方法的架子：
function debounce(func, wait) {
return function (...args) {
// 代码
}
}
debounce方法接收两个参数func和wait，func是被包装的方法，wait是用户两次输入间隔大于多少时会执行func
接下来问题的难点就是如何实现：用户两次输入间隔大于wait时才执行func，否则就不执行func
这个问题其实可以从这个角度来思考：
我们可以借助定时器setTimeout来做，声明一个定时器来在wait时间后执行func
如果用户输入的很慢（两次输入间隔大于了wait）或者输入结束，那这个setTimeout就顺利了执行了func；
如果用户输入的很快（两次输入间隔小于了wait），那我们取消当前这个setTimeout再重新生成一个新的setTimeout去延时执行func即可；
这样子我们就巧妙的使用了定时器的延时来控制函数的响应，延时范围内的就新生成一个定时器，延时范围外的就让它执行好了，也该它执行了
代码如下：
function debounce(func, wait) {
let timerId = 0;
return function (...args) {
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(() => {
func.apply(this, args);
}, wait);
}
}
这里面的细节我说一下，防止有的人看不太明白
变量timerId放在返回的方法外面，用来记录当前的那个定时器，并且timerId会在返回的方法内部使用到，这不就是妥妥的闭包吗？之前学习到的知识瞬间就用到了
然后返回的方法内部有一个if判断，就是如果当前有个定时器，别管这个定时器是否执行，先取消了再说，因为如果它执行了，那我clear它也不会有什么影响，如果它没执行，那刚好说明它还在wait这个时间间隔内，正好取消掉它
取消掉当前的定时器之后，再新生成一个定时器来延时执行func
定时器内部执行func的时候，需要把方法接收的参数都透传给func，并要保留住this
验证
验证代码就很简单了，如下：
<body>
<input id="debounce-input" placeholder="防抖输入框" />
<script>
const input = document.getElementById('debounce-input');
const handleInputOnChange = (e) => {
console.log('发起请求...');
}
input.oninput = debounce(handleInputOnChange, 300);
</script>
</body>
总结
这是手摸手解析JS手写面试题的第1篇，实现debounce方法是一个非常常见并且非常锻炼javascript能力的过程，在这个过程中练习到了闭包、定时器、抽象思维等等能力
希望对你们有帮助，有问题欢迎讨论
![[JS]面试官：你的简历上写着熟悉jsonp，那你说说它的底层逻辑是怎样的？](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635462/20241109/ab6c62833d4349a3b910e97f27656c88.png?x-oss-process=image/resize,h_160,m_lfit)