手把手教你实现一个防抖函数(debounce)

手把手教你实现一个防抖函数

前言：防抖函数在日常开发中属于是一个非常非常重要的知识点。通常在一个项目的最开始构建的时候，都会在 utils文件夹下备上这样一个函数，来为以后做准备。 （tips：utils 在大部分翻译软件内好像都叫跑龙套的，这个翻译不是那么合理。这个单词在这个场景下更像存放工具类的函数的文件夹。通常我们会放一些比如格式化时间，格式化文件大小格式，节流之类的函数。）

---

一. 什么是防抖？使用场景是什么？

1.首先我们要知道，这里的防抖具体指的是什么？我们假设一个场景，这里就拿我们日常最常用的功能，《搜索〉来举例子。

5.ok，现在压力来到了前端这边。接口该调还是得调，但是我希望他在我输入完 hanzhenfang 的时候，然后检测我没有继续往下输入了，再去调后端的接口，然后我再把返回的联想词联系给它展示在这里是不是就可以了呢？

二.理清思路

1.让我们转化一下思路，只是单纯的这样说你可能不太理解。我们换一个更为简单的场景。 <img src=“https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0024961182e74cfea8d53fd0219d5451~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?) 现在页面只有一个简单的按钮，通过点击这个按钮，我们会向后端发起请求。（这种场景我知道有很多别的限制方法🚫，比如在某个时间段内把按钮的 disabled 属性改为 true 等等，我们暂时不讨论这种解决方案。） 2.现在我们尝试疯狂点击按钮就会疯狂发送请求。 3.我们现在来修改一下这个函数，我们思考一下🤔，假设我们不借助 debounce 可以实现一个伪防抖的功能吗？答案是百分百可以的。我们先在这个文件下设定一个数字类型的变量叫做 timerID。稍后我会告诉你为什么是数字类型的。（tips:其实也不是特别需要限制类型 null 这些的也可以）4.然后我们设定一个定时器，来使这个 console.log("发请求") 在 1.5s 后执行。 5.我担心个别读者对《 setTimeout 是有返回值的》这件事不是特别了解。我来穿插讲解一下你可能不知道的知识。 其实 setTimeout 会在 setTimeout 执行的时候返回一个大于 0 的正整数。 所以我们这句话其实是在给 timerID 赋值！ 并不是将 setTimeout 函数本身赋值给 timerID 这个变量。 6.⚠️注意： 全文重点是下面这句话： 这里我们需要特别搞清楚 setTimout函数本身执行的时候，是马上赋值的，并不是等到 1.5s 后再赋值的。我希望你多读几句这句话，一定要理解这个概念！什么意思呢？ 我设置了大约在10几年后再执行的一个函数，千万不要觉得 timerID 是会在10年以后才会被赋值。 什么？你不信？来给你演示一下。 7.为什么要这样设计呢？因为如果这样执行的话，就会给我们一个反悔的机会。还说上面的例子。假设我在 5 年后突然反悔不想执行了。我只需要取消这个 timerID 就可以中途放弃执行。8.我们编写一个 cancleSearch 函数，这个函数非常简单。就是一个调用了 clearTimout 这个取消定时器的方法，并且我们把定时器的延时设定为3s。 演示一下： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dGE1XqSK-1676903606651)(null)] 可以清楚的看到，我的前两次请求已经被我成功阻止了。第三次由于我没点击取消，从而正确的在 3s后帮我执行了 getSearch 函数。9.聪明的你可能已经想到了，这个 timerID 就是每一个 setTimeout 的身份证。每当你执行一次 setTimout 后，setTimout 所接收的回调函数就会被分配一个唯一 ID，来被放进任务队列。注意！！！一旦任务顺利从任务队列被推进主线程执行后，这个唯一 id 其实作用也就没什么特别大的意义了。 10.而 clearTimeout 的功能恰好就是清除位于任务队列里指定的 id 所绑定的那个回调函数。三. 实现一个简单的自我防抖函” style=“margin: auto” />

1.由上面的前备知识，我们就可以实现一个非常简单的自我防抖函数。接下来我梳理一下思路。

1.我们只有一个函数需要防抖的话其实这样看着还行，但是现在有10个，100函数呢？我难道一个个这样写吗？nonono，程序员都是很懒滴～是不可能写重复的低质量代码的。所以聪明的你可能会想到会写一个生产 自我防抖 函数的函数。没错，引出我们今天的主角 debounce。2.好的，铺垫了这么久，也该敲敲代码了。我们先在 utils 文件夹下创建 debounce.ts 的文件来放我们的防抖函数。顾名思义。

1.等等，别着急。我大概能能猜到你会这样使用。

如果读者能够细心品文本篇文章的细节，你可能会自然而然的理解节流的原理是什么。节流相关知识我之前也是通俗易懂的用游戏技能冷却🎮带你去理解原理是什么。有兴趣的读者可以自行查阅～

特别感谢：

@林水溶君@Baoyuan0808

特别感谢：

@林水溶君@Baoyuan0808

最后感谢两位大佬对我写本文提供的思路和技术指导。🎁

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享