函数的执行通常有三个阶段,分别为:请求、执行、响应
当某些场景下,比如监听滚动、鼠标滑动轨迹等触发频率比较高的事件时,若处理函数稍为复杂,很容易使响应速度跟不上请求速度,这时就会造成页面卡顿、假死现象,非常不友好。
在无法提升硬件水平以及资源有限的情况下,解决方法是只响应部分请求。
throttle 和 debounce 是解决请求和响应不匹配问题的两个方案,差异在于不同的策略。
电梯超时
将电梯运送一次比做一次函数的执行与响应,有两种运行策略,设定 超时时间为 15秒
- Throttle 策略:第一个人进电梯后,开始计时,15秒后,准时运行,不等待。没有人,则待机。
- Debounce策略:第一个人进电梯后,开始计时,若在15秒内再次有人进电梯,重新开始15秒计时,若超出15秒,没有人进入,则电梯运行。
概括来说,节流策略就是在指定时间间隔内只执行任务一次,防抖策略是指在任务频繁触发的情况下,只有任务触发的间隔超过指定间隔时,才会执行。
https://github.com/stephenLYZ/stephenLYZ.github.io/issues/17 示例图比较直观