完整的阅读体验，请移步我的博客原文。防抖（de-shaking）和节流（shunting）在日常开发中可能用的不多，但是在特定场景下却非常有用。本文主要讨论防抖，镜像文章：Throttling-Understanding,PracticeandImplementation。将防抖和节流分开讨论，主要是为了让一些对防抖节流不是很了解的读者有针对性地一一掌握。防抖有两种模式（容易混淆）：延迟执行和直接执行。稍后再详细讨论。防抖的另一个关键点是是否用代码实现。本文循序渐进，先以一个简单案例的实现为例，画出流程图，然后根据流程图的逻辑编写防抖功能代码。一个典型的案例就是以日常开发中常用的搜索按钮为例。如果用户点击一次搜索按钮，然后在“握手”后不久再次点击按钮，防抖可以避免第二次甚至更多次搜索。点击查看第一个搜索按钮，不做任何防抖处理。搜索键A是第一种防抖模式：延迟执行。如果用户快速连续点击多次，只有在最后一次点击结束后，才会延迟执行搜索。搜索键B是第二种防抖模式：直接执行。如果用户快速连续点击多次，则只有第一次点击会执行搜索。什么是防抖结合上面的案例，防抖可以理解为：多次触发事件后，只执行一次事件处理函数。两种防抖模式可根据实际使用场景分别应用。应用场景在搜索框中实时输入文字进行搜索，点击查看案例，避免频繁点击搜索按钮触发搜索请求。假设我们要实现本文第一种情况下搜索按钮A的功能。先梳理一下需求：点击搜索按钮后，函数不会立即执行，而是等待一段时间再执行。如果在这段时间内再次点击按钮，则重新开始计时，等待同样的时间再执行。有两种实现方式。推荐第一个。使用定时器（setTimeout）简化代码，重点关注实现防抖的逻辑。方法一核心参数：Waitingtimetimer画出方法一的流程图：按照流程图思路实现方法一的防抖代码：functiondebounce(func,wait=0){lettimerfunctiondebounced(...args){constself=thisif(timer==null){addTimer()return}if(timer!=null){clearTimer()addTimer()return}functionaddTimer(){timer=setTimeout(()=>{invokeFunc()clearTimer()},wait)}functioninvokeFunc(){func.apply(self,args)}}returndebouncedfunctionclearTimer(){clearTimeout(timer)timer=null}}方法2核心参数：等待时间最早方法二的执行时间图流程图：按照流程图实现方法二的防抖代码：functiondebounce(func,wait=0){//最早可以调用func的时间letearliestfunctiondebounced(...args){constself=thisif(typeofearliest==='undefined'){setEarliset()}if(typeofearliest!=='undefined'){if(now()>=earliest){invokeFun()}else{setEarliset()}}functionsetEarliset(){earliest=now()+wait}functioninvokeFun(){func.apply(self,args)}}returndebouncedfunctionnow(){return+newDate()}}同样，我们可以使用实现搜索按钮B功能需求描述的类似方法：点击搜索按钮后，立即执行该功能。该功能需要等待一段时间，点击后才能执行。如果在此期间单击了按钮，则重新启动计时器。核心参数：等待时间timerfunctiondebounce(func,wait=0){lettimerfunctiondebounced(...args){constself=thistimer==null&&invokeFunc()timer!=null&&clearTimer()timer=setTimeout(clearTimer,wait)functioninvokeFunc(){func.apply(self,args)}}returndebouncedfunctionclearTimer(){clearTimeout(timer)timer=null}}接下来我们使用刚刚写的去抖动函数来测试第一次点击查看案例总结防抖是一个高级功能，可以将多个事件功能合二为一，在“调整窗口大小”、“实时搜索搜索框中输入的文字”、“滚动滚动条”而“防止”在“频繁点击搜索按钮触发冗余请求”等情况下非常有用。链接Lodash推荐：https://css-tricks.com/deboun...简单理解防抖定义:https://www.cnblogs.com/woody...感谢您抽空阅读本文。如果喜欢这篇文章，请点赞收藏分享，让更多人看到这篇文章，这也是对我最大的鼓励和支持！同时也欢迎大家多多阅读我的前端技术原创博客：苏惜云的博客。
