标签：

JS中的函数防抖 一、什么是函数防抖

观点：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会从头计算函数延执行时间。

举个栗子，坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多期待 10 秒，此时如果又有人进来（10秒之内反复触发事件），那么电梯就会再多期待 10 秒。在上述例子中，电梯在检测到有人进入 10 秒钟之后，才会封锁电梯门开始运行，因此，“函数防抖”的关键在于，在 一个事件 产生 一按时间 之后，才执行 特定行动。 二、为什么需要函数防抖

　　前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操纵 DOM 的函数（浏览器操纵 DOM 是很耗费性能的），那不只会浪费计算机资源，还会降低措施运行速度，甚至造成浏览器卡死、瓦解。这种问题显然是致命的。

除此之外，短时间内反复的 ajax 挪用不只会造成数据关系的混乱，还会造成网络拥塞，增加处事器压力，显然这个问题也是需要解决的。 三、函数防抖如何解决上述问题

按照上面对问题的分析，细细思索，，可以想到如下解决方案。

函数防抖的要点，是需要一个 setTimeout 来帮助实现，延迟运行需要执行的代码。如果要领多次触发，则把上次记录的延迟执行代码用 clearTimeout 清失，从头开始计时。若计时期间事件没有被从头触发，等延迟时间计时完毕，则执行方针代码。 四、函数防抖的代码实现

按照以上分析，我们对 “函数防抖” 来进行简单的代码实现，如下：

function debounce(fn,wait){ var timer = null; return function(){ if(timer !== null){ clearTimeout(timer); } timer = setTimeout(fn,wait); } } function handle(){ console.log(Math.random()); } window.addEventListener("resize",debounce(handle,1000));

以上代码本人亲测有效，小伙伴们可安心食用（注意，函数触发方法为 “resize”，转变窗口巨细，不雅察看浏览器控制台的变革）。 五、函数节流的使用场景

函数防抖一般用在什么情况之下呢？一般用在，持续的事件只需触发一次回调的场合。具体有：

搜索框搜索输入。只需用户最后一次输入完，再发送请求；

用户名、手机号、邮箱输入验证；

浏览器窗口巨细转变后，只需窗口调解完后，再执行 resize 事件中的代码，防备反复衬着。

目前遇到过的用处就是这些，理解了道理与实现思路，小伙伴可以把它运用在任何需要的场合，提高代码质量。

总结

函数防抖其实是分为 “当即执行版” 和 “非当即执行版” 的，按照字面意思就可以发明他们的分歧，所谓当即执行版就是 触发事件后函数不会当即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会从头计算函数执行时间。 而 “非当即执行版” 指的是 触发事件后函数会当即执行，然后 n 秒内不触发事件才华继续执行函数的效果。。

在开发过程中，我们需要按照差此外场景来决定我们需要使用哪一个版本的防抖函数，一般来讲上述的防抖函数都能满足大部分的场景需求。但我们也可以将非当即执行版和当即执行版的防抖函数结合起来，实现最终的双剑合璧版本的防抖函数，以下为小伙伴们做了简单的实现：

/** * @desc 函数防抖---“当即执行版本” 和 “非当即执行版本” 的组合版本 * @param func 需要执行的函数 * @param wait 延迟执行时间（毫秒） * @param immediate---true 表当即执行，false 表非当即执行 **/ function debounce(func,wait,immediate) { let timer; return function () { let context = this; let args = arguments; if (timer) clearTimeout(timer); if (immediate) { var callNow = !timer; timer = setTimeout(() => { timer = null; }, wait) if (callNow) func.apply(context, args) } else { timer = setTimeout(function(){ func.apply(context, args) }, wait); } }

JS进阶篇2---函数防抖（debounce）