函数防抖(Debounce)、函数节流 (Throttle)

函数防抖(Debounce)

  • 比较好的解释:https://www.jianshu.com/p/3e8e31f99639
  • JavaScript专题之跟着underscore学防抖:https://github.com/mqyqingfeng/Blog/issues/22
  • 其实概念很简单,就两句话:
    第一句:函数执行过一次后,在等待时间内不能再次执行。
    第二句: 在等待时间内触发此函数,则重新计算等待时间。
  • 换句通俗的话说,就是:你尽管触发事件,但是我一定在事件触发n秒后才执行,如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n秒后才执行,总之,就是要等你触发完事件n秒内不再触发事件,我才执行。
  • 如果不理解上面定义,我可以再给大家举个生活例子:
    如果有人进电梯(触发事件),那电梯将在10s出发(执行事件句柄),这时如果又有人进电梯了(在10s内再次触发该事件),我们又得等10s再出发(重新计时)。这个例子很完美的展示了函数防抖的精髓。

函数节流 (Throttle):在某个时间段内,至多执行一次

  • JavaScript专题之跟着 underscore 学节流:https://github.com/mqyqingfeng/Blog/issues/26
  • 如果你持续触发事件,每隔一段时间,只执行一次事件;
    如果某个时间段内,没有触发事件,则不执行。

函数防抖和函数节流的区别是:函数防抖可能会被无限期的延迟。

posted on 2018-09-25 01:12  cag2050  阅读(918)  评论(0编辑  收藏  举报

导航