区分函数防抖&函数节流
1. 概念区分
函数防抖:触发事件后,在n秒内函数只能执行一次,如果触发事件后在n秒内又触发了事件,则会重新计算函数延执行时间。
简单说:
频繁触发, 但只在特定的时间内才执行一次代码,如果特定时间内重新触发,break打断之后重新开始执行;
函数节流:在极少数情况下,函数的触发不是由用户直接出发的。在这些情况下,函数有可能被频繁的调用,造成大的性能问题
简单说:
频繁触发,只在特定的时间内执行一次,continue继续执行完;
2. 原理区分
看定义,你可能一会就忘记了,什么是函数防抖,什么是函数节流,最容易出错的就是函数防抖和函数节流还给混淆了。
今天看了,明天就把函数防抖和函数节流给搞反了。这是事实,不过我发现了小巧门,就跟初中、高中的数学公式一样。不用死记硬背,搞懂原理,顺着原理就推导出来,谁还记概念呢!
咋们举个网上绝无仅有的例子,唯我独创,哈哈,自恋了!
就拿咋用苍蝇拍打苍蝇一样,什么时候是函数防抖,什么时候是函数节流呢?
当你看电视的时候,两只苍蝇在电视机屏幕上来回的移动,实在是烦。于是你拿起了你手旁的苍蝇拍,准备把该死的苍蝇拍死在电视机上。
假设,拍打一次算一次特定的时间,拍打一次还打住了苍蝇算函数完成。
- 我们拍打一次算一次完整的执行动作;
- 假设苍蝇一直在不停的起飞,重新降落;我们的手还没打下去,苍蝇就重新换位置了,如此重复;怕打坏电视屏幕,我们的手一直处于拍打前的抖动状态,防止我们的手因为苍蝇的移动,不敢拍下去,而处于一种抽搐的状态。
函数防抖:就是等苍蝇落稳了,我们进行一次拍打动作,如果苍蝇飞走了,我们停在半空的手,没有拍打到电视上,重新处于拍打前的状态。(拍打一次算一次特定的时间,此时还没有拍下去)。
对应的解释:拍打一次算一次的特定的时间,如果苍蝇飞走了,此时苍蝇拍还没有拍下,我们重新拍打苍蝇,还没拍下,苍蝇又飞走了,如此周而复始,我们一直处于抖动状态,所以,我们拍打到苍蝇飞走,不能算一个特定的时间,待苍蝇落定之后,直到苍蝇落定,苍蝇拍拍下之后算一次特定时间,否则时间重新开始计算;
函数节流:就是等苍蝇落稳了,我们进行一次拍打动作,此时苍蝇飞走了,但是,你觉得拍打下去的时候,可能伤到它,该死的苍蝇就不会在电视上乱飞,干扰你看电视,所以你毅然决然的把拍打到了电视屏幕上(拍打一次算一次特定的时间,此时动作完成了)。
对应的解释:还是拍打一次算一次的特定时间,即使苍蝇飞走了,但是苍蝇拍拍打下之后,有可能伤及到苍蝇,或者苍蝇不再讨厌的在电视屏幕上乱飞,我们不像防抖那样,重新归为计算,我们要直接把苍蝇拍拍下,完成一次特定时间的拍打动作,这期间苍蝇有飞到别的地方,我们重新开始一次特定时间的拍打苍蝇动作。
3. 总结
我们只要记住,拍打一次苍蝇为一个特定的时间,函数防抖就是,苍蝇一直飞来飞去,我们一直没有完成一次特定时间,苍蝇飞走一次,我们重新拍打一次算特定时间的开始,直到拍打苍蝇结束为一次计算时间的周期,之前没有拍下的动作周期都结束重新开始;函数节流就是,不管苍蝇飞走了还是没有飞走,都要拍打一次,直到拍打苍蝇结束,算一次计算时间的周期;
英文单词记不记得住,哦,这个不在我的教学范围内。我也记不住!如果记不住,那就只记住一个,那记不住的及时另一个!这是最笨的方法。但是,挺有效的!