防抖和节流

161 阅读2分钟

防抖

防抖是指当一个事件被触发后,防抖会延迟一段时间在执行处理函数,如果在延迟时间内再次触发该事件,则会重新计时延迟执行,简单来说,防抖会等待一段时间,如果在此期间没有再次触发该事件,才会执行相应操作。

防抖通常用于频繁触发的事件中,如窗口大小变化,输入框输入等。通过防抖可以避免频繁执行事件的处理函数,减少性能消耗。比如使用搜索框搜索时可以使用防抖来避免每个按键都触发搜索请求,而是等用户输入完成之后再进行搜索操作。

防抖场景:

(1) resize事件, 屏幕修改宽度高度, 会非常频繁的触发 一般需求是, 等用户修改完屏幕大小后, 做适配 => 延迟执行
(2) 输入框搜索提示, 实时每个字母都立刻做提示, 频繁触发了 一般需求是, 等用户一段时间没有输入新的内容, 做搜索提示 => 延迟执行

节流

节流是指,当一个事件触发后,节流会限制该事件在一定时间间隔内只执行一次。无论触发多少次事件,在指定时间间隔内只会执行一次处理函数。

节流也常用于频繁触发的事件中,如滚动事件,鼠标移动时间等,通过节流可以限制事件处理函数的执行频率,以提高性能并平滑的处理事件。比如在滚动触发的事件中,使用节流可以减少处理函数的执行次数,避免频繁操作导致卡顿和性能问题。

节流场景:

(1) 点按钮loading请求, 发请求立刻发, 发的过程中, 不会发第二次
(2) 轮播图, 点击箭头, 开始滑动, 滑动的过程中, 关闭节流阀, 等动画结束, 才能执行第二次
(3) 下拉刷新, 上拉加载更多, 一旦请求了, loading状态, 关闭节流阀
(4) h5小游戏, 跑酷, 跳的时候, 关闭节流阀, 落地之后, 才能跳第二次