js -- 防抖和节流

今天在某勾上收到一家公司的面试请求，但要回答几个问题，第一个就是问防抖和节流，WTF？这就触及到我知识的盲区了，没听说过啊

赶紧学习！！！！

防抖和节流是个啥？

就是控制事件高频率发生，比如说，input框持续输入，scroll滚动事件等等。

先看例子：

html:

js:

当input持续输入时，在资源上会是一种浪费

在实际情况下也没人会输一个字符提交一次，大都是输完再提交

防抖

防止函数抖动，这里的抖动指的就是高频率执行，而一般的抖动都是高频率，持续性强（脑补帕金森）。我们希望它能冷静下来，也就是说当持续事件发生的时候，函数不执行，当事件停止n秒后在执行函数。

优化一下js代码：

演示：

防抖

节流

让事件有节制的进行，就是在一段时间内，只执行一次。

思考：持续的发生，有节制的执行

优化代码：

演示：

节流

可以看到，节流就是在一个单位时间里只触发一次函数，但是输入的这个事件一直在持续。

总结

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。

简单来讲

防抖就像法师搓冰球，读条就相当于持续触发函数，当还在读条时再按技能读条就会重置，直到冰球打出去为止。

而节流就像是控制射速，在你把射速调到1的时候，即使你鼠标按得再快，也是一秒的射速。