码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-05-13 23:43:20      阅读:322      评论:0      收藏:0      [点我收藏+]

标签:超时   发送   throttle   bounce   个人   响应   ttl   执行   两种   

电梯超时

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

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

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

 

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

下面我列举了一些场景:

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

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

标签:超时   发送   throttle   bounce   个人   响应   ttl   执行   两种   

原文地址:https://www.cnblogs.com/xuzishuai/p/9033934.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!