节流和防抖动

函数的执行通常有三个阶段,分别为:请求执行响应

当某些场景下,比如监听滚动、鼠标滑动轨迹等触发频率比较高的事件时,若处理函数稍为复杂,很容易使响应速度跟不上请求速度,这时就会造成页面卡顿、假死现象,非常不友好。

在无法提升硬件水平以及资源有限的情况下,解决方法是只响应部分请求。

throttle 和 debounce 是解决请求和响应不匹配问题的两个方案,差异在于不同的策略。

电梯超时

​ 将电梯运送一次比做一次函数的执行与响应,有两种运行策略,设定 超时时间为 15秒

  • Throttle 策略:第一个人进电梯后,开始计时,15秒后,准时运行,不等待。没有人,则待机。
  • Debounce策略:第一个人进电梯后,开始计时,若在15秒内再次有人进电梯,重新开始15秒计时,若超出15秒,没有人进入,则电梯运行。

概括来说,节流策略就是在指定时间间隔内只执行任务一次,防抖策略是指在任务频繁触发的情况下,只有任务触发的间隔超过指定间隔时,才会执行。

https://github.com/stephenLYZ/stephenLYZ.github.io/issues/17 示例图比较直观

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×