关于debounce和throttle的区别及应用场景

电梯超时

想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应。假设电梯有两种运行策略 `throttle` 和 `debounce` ，超时设定为15秒，不考虑容量限制。

throttle 策略的电梯。保证如果电梯第一个人进来后，15秒后准时运送一次，不等待。如果没有人，则待机。

debounce 策略的电梯。如果电梯里有人进来，等待15秒。如果又人进来，15秒等待重新计时，直到15秒超时，开始运送。

 

那什么时候该用 debounce 什么时候该用 throttle 呢？

下面我列举了一些场景：

• input 中输入文字自动发送 ajax 请求进行自动补全： debounce
• resize window 重新计算样式或布局：debounce
• scroll 时更新样式，如随动效果：throttle

转载于:https://www.cnblogs.com/xuzishuai/p/9033934.html