应用场景:
当用户高频率的触发事件,事件较短,内部出现卡顿现象
解决方法:
防抖节流
防抖节流功作用:
主要目的是为了降低高频事件触发,减少dom操作或请求次数,提升性能
防抖函数debounce
使用的原理:前面所有的触发,是最后一次执行后在规定的时间内触发(只执行一次)
n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时
举例:
假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒,不考虑容量限制电梯第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖
节流函数throttle
使用原理:少量的触发,在规定的时间内是不会重复触发的,只有超过这个事件才会再次的触发
n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
举例:
假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒,不考虑容量限制
电梯第一个人进来后,15秒后准时运送一次,这是节流
使用方式:
使用lodash插件,安装lodash插件
npm i lodash
引入
import _ from 'lodash'
节流
this.right=_.throttle(this.right,1000)
防抖
this.left=_.debounce(this.left,1000)