两个例子搞懂节流和防抖
节流
就是为了防止用户在某段时间内频繁的触发多次请求,而只会去执行第一次请求,例如滚动事件
我们可以把节流比喻成:一个公交车司机和乘客以及时间的关系
比如公交车司机在客运站等待乘客的到来,当第一个乘客来了之后会告诉乘客车10分钟后才发车,在此期间会继续等待其他乘客的到来,当10分钟到了之后,无论还有没有乘客,司机都会发动汽车离开,这就是节约资源(节流)
以窗口滚动事件为例:
timer:看成公交车刚进站时时间从0计时
now- timer > interval: 等待的时间超过了规定的时间,就需要去执行scroll函数(发车)
timer = now: 下一辆车进站,重新计时开始
防抖
不管用户如何频繁的进行操作,都只会去执行最后的一次操作
我们可以把防抖比喻成:一个公交车司机和乘客以及时间的关系
比如公交车司机在客运站等待乘客的到来,当第一个乘客来了之后会告诉乘客车10分钟后才发车,在此期间会继续等待其他乘客的到来,当第二个乘客到来之后,会重新计时,变成新的10分钟,以此类推,在下一次10分钟内如果还有乘客到来,继续重新计时为10分钟,否则就发车
以窗口滚动事件为例:
timer = null: 汽车刚进站,还未开始计时
timer = setTimeOut(() => { }): 在delay时间内如果没有人再来,就发车(执行函数)