![防抖与节流.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49a57f2fb0254f0c90b6a810e899d699~tplv-k3u1fbpfcp-watermark.image?) 在开发中，我们可能碰到这样的问题： - 用户在搜索的时候，在不停的输入，如果每敲一个字我们就要调一次接口去查询，接口调用太频繁，会占内存给卡住。 - 手机号、邮箱验证输入检测 - 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。 - 页面滚动处理事件 #### 原理分析 > 防抖：在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又被触发，则重新计时延迟时间函数防抖原理：通过维护一个定时器，其延迟计时以最后一次触发为计时起点，到达延迟时间后才会触发函数执行。防抖的实现方式分两种 **“立即执行”** 和 **“非立即执行”** ，区别在于第一次触发时，是否立即执行回调函数。 > **“立即执行防抖”** 指事件触发后，回调函数会立即执行，之后要想触发执行回调函数，需等待 n 秒延迟 > > **”非立即执行防抖“** 指事件触发后，回调函数不会立即执行，会在延迟时间 n 秒后执行，如果 n 秒内被调用多次，则重新计时延迟时间 **理解：** - 相当于英雄大招，施法后要等技能冷却才能再次施法（立即执行）。 - 法师发技能的时候要读条，技能读条没完再按技能就会重新读条（非立即执行）。 #### 手写防抖那么理解了什么是防抖，我们可以手写一个防抖，这不仅在面试中经常出现，工作中也会遇到。 ##### **非立即执行** ```html ``` > 特别说明：apply 是为了改变某个函数运行时的 context 即上下文而存在的，说人话就是改变this指针的指向，函数.apply(第一个参数就是你想吧this指针指向哪，第二个参数就是你向里面传的参数（arguments）)； > > apply()方法接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。 > > call()方法第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。 > > 在js中，所有的函数再被调用的时候都会默认传入两个参数，一个是this，还有一个是arguments。在默认情况下this都是指当前的调用函数的对象。但是有时候我们需要改变this的指向，也就是说使函数可以被其他对象来调用，那么我们应该怎样做呢？这时候我们就可以使用call和apply方法了；但是问题来了，我不想点击了按钮要等一秒它才发起请求，It is too slow！能不能点击立即执行，再次点击才需要等待技能冷却？Of course！ ##### **立即执行** ```js function debounce(fn,time) { let timer = null return function () { let context = this let args = arguments if(timer) clearTimeout(timer) //清除前一个定时器 let callNow = !timer timer = setTimeout(()=>{ timer = null },time || 500) if (callNow) fn.apply(context,args) } } ``` 这个时候产品经理又提了一个新需求：能不能这个按钮立即执行，那个按钮非立即执行？ ”呵......我早就猜到你会提出这种无理的需求！看剑！“，可以实现吗？”可以，得加钱💴“。那我加个 `immediate`参数判断是否立即执行呗。 ##### **组合版本** ```html ``` 产品经理：”可不可以.......“， ”你走啊😠“ ”能不能取消`debounce`函数，比如在登录时候的重新请求短信验证码，错一次要等好久“ ##### **取消debounce（终极版）** ```html ``` 面试官：你能手写一个防抖看看吗？ ”看我不秀死你“