【连载】手摸手解析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月前
|
Web App开发 缓存 前端开发
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
171 4
|
4月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
323 0
|
4月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
342 80
|
4月前
|
存储 安全 Java
2025 最新史上最全 Java 面试题独家整理带详细答案及解析
本文从Java基础、面向对象、多线程与并发等方面详细解析常见面试题及答案,并结合实际应用帮助理解。内容涵盖基本数据类型、自动装箱拆箱、String类区别,面向对象三大特性(封装、继承、多态),线程创建与安全问题解决方法,以及集合框架如ArrayList与LinkedList的对比和HashMap工作原理。适合准备面试或深入学习Java的开发者参考。附代码获取链接:[点此下载](https://pan.quark.cn/s/14fcf913bae6)。
1418 48
|
4月前
|
前端开发 JavaScript 开发者
2025 最新 100 道 CSS 面试题及答案解析续篇
本文整理了100道CSS面试题及其答案,涵盖CSS基础与进阶知识。内容包括CSS引入方式、盒模型、选择器优先级等核心知识点,并通过按钮、卡片、导航栏等组件封装实例,讲解单一职责原则、样式隔离、响应式设计等最佳实践。适合前端开发者巩固基础、备战面试或提升组件化开发能力。资源地址:[点击下载](https://pan.quark.cn/s/50438c9ee7c0)。
107 5
2025 最新 100 道 CSS 面试题及答案解析续篇
|
4月前
|
缓存 NoSQL Java
Java Redis 面试题集锦 常见高频面试题目及解析
本文总结了Redis在Java中的核心面试题,包括数据类型操作、单线程高性能原理、键过期策略及分布式锁实现等关键内容。通过Jedis代码示例展示了String、List等数据类型的操作方法,讲解了惰性删除和定期删除相结合的过期策略,并提供了Spring Boot配置Redis过期时间的方案。文章还探讨了缓存穿透、雪崩等问题解决方案,以及基于Redis的分布式锁实现,帮助开发者全面掌握Redis在Java应用中的实践要点。
201 6
|
4月前
|
NoSQL Java 微服务
2025 年最新 Java 面试从基础到微服务实战指南全解析
《Java面试实战指南:高并发与微服务架构解析》 本文针对Java开发者提供2025版面试技术要点,涵盖高并发电商系统设计、微服务架构实现及性能优化方案。核心内容包括:1)基于Spring Cloud和云原生技术的系统架构设计;2)JWT认证、Seata分布式事务等核心模块代码实现;3)数据库查询优化与高并发处理方案,响应时间从500ms优化至80ms;4)微服务调用可靠性保障方案。文章通过实战案例展现Java最新技术栈(Java 17/Spring Boot 3.2)的应用.
230 9
|
4月前
|
设计模式 安全 Java
Java 基础知识面试题全解析之技术方案与应用实例详解
本内容结合Java 8+新特性与实际场景,涵盖函数式编程、Stream API、模块化、并发工具等技术。通过Lambda表达式、Stream集合操作、Optional空值处理、CompletableFuture异步编程等完整示例代码,助你掌握现代Java应用开发。附面试题解析与技术方案,提升实战能力。代码示例涵盖计算器、员工信息统计、用户查询、模块化系统设计等,助你轻松应对技术挑战。
104 9
|
4月前
|
缓存 Java 索引
2025 年 Java 面试必备最常见 200 + 面试题及答案解析
这是一份针对Java面试的综合技术方案与应用实例文档,涵盖Java基础(JDK/JRE、字符串、IO流)、容器(ArrayList/LinkedList、HashMap)、多线程(线程创建、同步、线程池)、数据库(MySQL索引、Redis缓存穿透)及Spring框架(IOC容器、热部署)等核心模块。通过详细解析常见面试题,帮助读者深入理解并掌握Java核心技术,为应对面试提供全面指导。此外,还涉及反射、设计模式、JVM调优等进阶内容,助力开发者全面提升技能。代码示例可从提供的链接下载。
834 6
|
4月前
|
算法 安全 Java
2025 校招必看:Java 开发面试核心知识点深度解析及最新笔面试题汇总
本文针对2025校招Java开发面试,系统梳理了Java基础、集合框架、多线程并发、JVM等核心知识点,并附带最新笔面试题。内容涵盖封装、继承、多态、异常处理、集合类使用、线程同步机制、JVM内存模型及垃圾回收算法等。同时深入探讨Spring、数据库(MySQL索引优化、Redis持久化)、分布式系统(CAP理论、分布式事务)等相关知识。通过理论结合实例解析,帮助考生全面掌握面试要点,提升实战能力,为成功拿下Offer奠定坚实基础。
392 3

热门文章

最新文章

推荐镜像

更多
  • DNS