往事不堪回首
犹记在很久之前的某次面试中，和那技术大哥谈的正欢呢，冷不防他来了句：谈一谈防抖和节流吧。
抹了把凉汗，我用颤抖的、不自信的语气回答道：呃，防抖就是应该是防止抖动的意思，节流大概是节省流量吧……
当时，我的心理活动是这样的：
坏滴很
当年心理素质是真的差，这个坎没翻过去，最后的结果就是：
悲伤
知耻而后勇
以我不服输的性格，这场子必须找回来！
经过这几年的勤学苦练，我现在自信简直爆棚，如果，时光能够倒流，我相信我可以做到这样：
面对疾风
今天，我要跟「防抖节流」来做个了断，以证明现在的我已不是过去的我，用一个成语来形容，那就是——今非昔比！
知己知彼，方能百战百胜
古老的法则告诉我们：欲要消灭敌人，必须先要了解敌人。
防抖（debounce）
从字面意思来看，防抖就是防止抖动的意思。
举个例子：比如说你对象要你帮她拍美照， 结果因为你加班太多身体虚，手抖的厉害，拍出来的照片模糊不清，为免受雷霆之怒，你就需要想想办法。首先，分析一下照片模糊的原因：
- 手抖的厉害（1s 十几次！！？？）
- 导致相机不能完美的捕捉画面
- 所以照片模糊。
看来，「手抖」才是罪魁祸首啊，那想个办法解决手抖的问题就好了：找一个支架，让它代替手来支撑相机，这样就不「抖」了！
这操作，让我不得不对你竖起大拇指：
image
想想看上面这个例子本质上是解决了什么问题？
我觉得应该是解决了「抖动频率」的问题——手拿着，一秒会抖好多次；可支架撑着，好长时间都未必会抖一次。可谓是「人不如架」啊！
支架起的就是防抖的作用。
回到我们今天的正题上，来看一下防抖的常规解释：当函数被连续调用时，该函数并不执行，只有当其全部停止调用超过一定时间后才执行1次。
防抖
节流（throttle）
现在回头看看我当年的回答，还是摸到了一点门槛（手动缓解尴尬，嘿嘿）。
再来个例子：家里的水龙头，即使你开的再大，它在单位时间里能流出的水就那么多，因为水龙头的规格限制了它单位时间里的流量。
水龙头起到的就是节流的作用。
节流的常规解释：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
节流
常用场景
防抖节流一般用于以下场景：
- 浏览器窗口的缩放，页面的滑动触发的
resize，scroll - 鼠标事件
onmousemove，onmousedown，onmouseup - 输入框录入触发的
keyup，keydown……
原理
防抖是维护一个计时器，规定在 delay 时间后触发函数，但是在 delay 时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。
节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
区别
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
总结
今天就先来了解一下「防抖」和「节流」的基础知识，详细代码实现待后续。
~
~
~ 未完待续
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！
mianshi
网友评论