今天在某勾上收到一家公司的面试请求,但要回答几个问题,第一个就是问防抖和节流,WTF?这就触及到我知识的盲区了,没听说过啊
赶紧学习!!!!
防抖和节流是个啥?
就是控制事件高频率发生,比如说,input框持续输入,scroll滚动事件等等。
先看例子:
html:
js:
当input持续输入时,在资源上会是一种浪费
在实际情况下也没人会输一个字符提交一次,大都是输完再提交
防抖
防止函数抖动,这里的抖动指的就是高频率执行,而一般的抖动都是高频率,持续性强(脑补帕金森)。我们希望它能冷静下来,也就是说当持续事件发生的时候,函数不执行,当事件停止n秒后在执行函数。
优化一下js代码:
演示:
节流
让事件有节制的进行,就是在一段时间内,只执行一次。
思考:持续的发生,有节制的执行
优化代码:
演示:
可以看到,节流就是在一个单位时间里只触发一次函数,但是输入的这个事件一直在持续。
总结
防抖和节流的作用都是防止函数多次调用。区别在于,假设一个用户一直触发这个函数,且每次触发函数的间隔小于wait,防抖的情况下只会调用一次,而节流的 情况会每隔一定时间(参数wait)调用函数。
简单来讲
防抖就像法师搓冰球,读条就相当于持续触发函数,当还在读条时再按技能读条就会重置,直到冰球打出去为止。
而节流就像是控制射速,在你把射速调到1的时候,即使你鼠标按得再快,也是一秒的射速。