JavaScript高级编程 加入小组

27个成员 18个话题 创建时间:2019-11-21

【简单快速理解】防抖和节流

发表于2020-08-14 1273次查看

 

防抖和节流是解决问题的手段

 

防抖,就是防止抖动,消除抖动的意思。如果在段时间之内多次频繁的触发同一个事件,不作处理的话就好像这个行为卡在了多个任务之间,上一个没做完,又要做下一个。防抖就是加一些逻辑使多次触发同一时间是,只执行一次事件内容。

比如游戏中点击了“回城”,过程中又继续点击,只会一次次的重新开始“回城”,而不是回了多次城。

再比如我们的onScroll事件,只要页面滚动,哪怕一像素,都要触发一次,所以项目中会有一个“期限值”,在期限时间内再次触发的话,当前期限计时取消,重新及时,一直到期限时间内没有二次出发,再执行事件内容。

 

节流,就是将行为暂时禁止,使其失效,过段时间再重新激活。为的是解决在“防抖”时还是有机会频繁触发事件,我们将事件被执行一次后一段时间内,将事件禁止,就是指定时间期限内不工作,过后再恢复。

比如游戏中的“技能”,释放技能后需要“技能冷却时间”,不能连续使用。

再比如我们在实现banner时,对两侧按钮的约束,当banner进行图片切换动画时,按钮时失效的,不能连续点击生效。

 

防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行

发表回复
你还没有登录,请先 登录或 注册!