差异分析
刚开始写节流的时候,没有真正理解其难点,而且网上的防抖和节流函数,不得不说,真的是鱼龙混杂,有些看了简直添乱。
之前一直认为节流就是“时间间隔T内,点击一个按钮n次,只执行第1和n次”,完全没有体会到节流的难点其实在于多次相同的调用时传递的不同的!参数!
防抖相对节流稍微简单一点,触发函数后只有在时间段n内没有再次被触发函数才会被执行。
打个比方
这里写的格式是:参数(传入时刻)
A(1) B(2) C(3) D(4) E(6) F(7) G(11) H(12)
设置间隔时间为3个单位时间
那么防抖后的输出结果就会是:F(10) H(15)
节流后的输出结果就会是: A(1) D(4) F(7) G(11) H(14)
所以实际上节流和防抖的n次调用都是完全不同的调用,如果不把这n次调用的作用域和参数分析出来,我认为是很难震真正理解节流的。
节流
思路解析
那么做这个节流就不仅仅是定时器的问题,有几个问题需要处理:
如何判断你这个是不是第一次执行(也就是没有等待时间的)?
A时刻经过第一次调用的函数,在被B调用后,已经处于B调用的等待之中,如果又被C调用,那么结束A创建的定时器的时候,需要真正调用的就是C的参数,参数的置换如何完成?
结束长期等待之后的新一轮调用,如何和‘第一次调用“区分开?(也就是如何体面的结束定时器
当然现在节流有很多实现方式,我这里只谈这一种,具体思路其实就两点:从【等待中/非等待中】两种状态的处理对整个函数运行进行大的调控,以及使用变量接收此时此刻的参数并且在定时器的回调中实时更新。
那么对于等待中和非等待中,我们又应该做什么呢?
非等待中被调用,直接执行函数,并且设置定时器,将状态切换成等待中
等待中,只需要切换此时定时器回调函数中即将调用的原函数的参数即可。
整体代码如下
代码
我做这个的时候有个大佬说,节流的亮点在于闭包的使用。在我没搞懂这个东西的时候其实没听懂。等将这个代码写出来再看这句话,嗯,确实很有道理
防抖
思路解析
防抖相对而言就简单多了,检测此时有没有定时器,没有就创建定时器,有就重置定时器。相较于防抖,他不需要考虑定时器中参数置换的问题,谁创建,参数就一定是谁。