性能优化之防抖与节流

367 阅读1分钟

1.防抖

顾名思义就是防止抖动

原理: 当持续触发一个事件时,在n秒内,事件没有再次触发,此时才会执行回调;如果n秒内,又触发了事件,就重新计时.

辅助理解:在你坐电梯时,当一直有人进电梯(连续触发),电梯门不会关闭,在一定时间间隔内没有人进入(停止连续触发)才会关闭。

例子: input框输入

定时任务,每次触发先将定时任务清除,再创建新的定时任务

2.节流

顾名思义控制流量

辅助理解:下面我们就来实现一个简单的节流函数,由于每隔一段时间执行一次,那么就需要计算时间差,我们有两种方式来计算时间差:一种是使用时间戳,另一种是设置定时器.

例子:

拖拽场景:固定时间内只执行一次, 防止高频率的的触发位置变动

监听滚动事件:实现触底加载更多功能

屏幕尺寸变化时, 页面内容随之变动,执行相应的逻辑

射击游戏中的mousedown、keydown时间

定时任务,判断定时任务存在不,存在就返回,不存在就新建写一次定时任务,并且定时任务执行完,清空定时任务 timeId = null