0%

函数去抖(debounce)与函数节流 (throttle)

场景一

  • 王者荣耀的普攻阈值是怎么实现的?
  • 射击游戏里的攻击速度是怎么限制的?
  • 怎样计算滚动条滚动位置,最多50ms 计算一次?
概念

函数节流

调节强制执行一段时间内可以调用函数的最大次数,如“每100毫秒最多执行一次”。
在正常情况下,我们可以在10秒钟内调用此函数1000次。如果每100毫秒将其限制为仅一次,则最多只能执行该功能100次。

函数节流的核心是,让一个函数不要执行得太频繁,减少一些过快的调用来节流。

例如上述场景中,游戏里的攻速限制,就是使用的函数节流的手段。

场景二

  • 即时搜索的搜索框中,如何控制只在用户输入完成后触发ajax ?

函数去抖

强制一个函数在一段时间内只被调用一次。如“一个函数100毫秒内只执行一次”。
也许一个函数在很集中的时间内被调用1000次,超过3秒,然后停止调用。如果我们在100毫秒内将其去抖动,该函数将仅启动一次3.1秒。函数去抖就是对于一定时间段的连续的函数调用,只让其执行一次。

异同

相同点:都是为了处理性能问题而限制 UI 操作

就像一窝蜂的人去排队看演出,队伍很乱,看门的老大爷每隔1秒,让进一个人,这个叫throttle,如果来了这一窝蜂的人,老大爷一次演出只让进一个人,下次演出才让下一个人进,这个就叫debounce。