【连载】手摸手解析JS手写面试题题系列1——实现debounce(防抖)方法

简介: 手摸手解析JS手写面试题题系列1——实现debounce(防抖)方法

手摸手解析JS手写面试题题系列1——实现debounce(防抖)方法

关注程序员耳东,编程转码真轻松

这是手摸手解析JS手写面试题系列第1篇,聊聊如何实现debounce(防抖)方法

啥是debounce(防抖)

首先说说啥是debounce, 这个单词中文名就是防抖,之前没接触过的人可能一脸蒙

不过没关系我最擅长的就是通俗易懂的解释清楚概念,我一说你就明白了

举个例子,比如说这样一个场景:

比如下图这样,用户在输入框里面输入字符,然后根据用户输入的字符去后端模糊查询,这是个很常见的场景对吧?这就是经常说到的联想搜索

OK,我们继续探究这个功能的细节

比如你想搜索“世界杯”这三个字,普通的联想输入框是这样运作的:

  1. 在你敲入第一个字的时候,触发了输入框的onchange事件,前端带着“世”这个字向后端发起1次请求
  2. 在你敲入第二个字的时候,触发了输入框的onchange事件,前端带着“世界”这两个字向后端发起1次请求
  3. 在你敲入第三个字的时候,触发了输入框的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毫秒,有两种情况:

  1. 用户打字的手速比较慢,两次输入的间隔大于了300毫秒,此时因为用户手速实在是太慢了,我们不需要很刻意的去做debounce,所以每次输入后都会执行一次handleInputOnChange
  2. 用户手速很快的打完了一段文字并且停止了输入,此时最后一次输入完毕后过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能力的过程,在这个过程中练习到了闭包、定时器、抽象思维等等能力

希望对你们有帮助,有问题欢迎讨论

相关文章
|
4天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
4天前
|
前端开发 JavaScript
Web前端开发之面试题全解析 一,2024年最新面经牛客
Web前端开发之面试题全解析 一,2024年最新面经牛客
|
4天前
|
移动开发 前端开发 JavaScript
Web前端开发之面试题全解析 一(3),前端面试题背不下来怎么办
Web前端开发之面试题全解析 一(3),前端面试题背不下来怎么办
|
4天前
|
前端开发 算法 搜索推荐
Web前端开发之面试题全解析 一(1),2024年最新前端组件化面试
Web前端开发之面试题全解析 一(1),2024年最新前端组件化面试
|
4天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
4天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
4天前
|
前端开发 JavaScript
web前端JS高阶面试题,2024我的前端大厂面试之旅
web前端JS高阶面试题,2024我的前端大厂面试之旅
|
4天前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
4天前
|
JSON 前端开发 JavaScript
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
|
4天前
|
Linux 网络安全
CentOS系统openssh-9,网络安全大厂面试真题解析大全
CentOS系统openssh-9,网络安全大厂面试真题解析大全

推荐镜像

更多