性能优化之防抖与节流
(一)防抖
(1)定义:单位事件内,频繁触发,只执行最后一次(像王者荣耀的回城操作)
(2)使用场景:搜索输入框、手机号邮箱输入检测
(3)如何使用防抖
(3.1)lodash处理防抖
引入lodash.min.js,用其提供的函数为_.debounce(fun,时间)
第一个参数为要处理的函数,第二个为过了多少秒执行函数
(3.2)手写防抖函数
核心思路:利用定时器setTimeout实现
- 声明一个定时器变量
- 当鼠标每次滑动先判断是否有定时器了,如果有则先清除以前的定时器
- 如果没有定时器则开启定时器,记得存在变量里面
- 在定时器里面调用要执行的函数
function debounce(fn,t){
let time
// 如果直接写函数,则页面一打开就会执行函数,且执行一次,所以要返回一个函数
return function(){
if(time) clearTimeout(time)
time=setTimeout(function(){
fn()
},t)
}
}
(二)节流
(1)节流定义:单位时间内,频繁触发,只执行一次(例如技能冷却,等几秒后才能执行下一次的代码)
(2)应用场景:鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等
(3)如何实现节流
(3.1)lodash处理节流
_.throttle(fn,时间),第一个参数为要执行的函数,第二个参数为最多多少秒执行一次函数
(3.2)手写节流函数
核心思路:利用定时器setTimeout实现
- 声明一个定时器变量
- 当鼠标每次滑动先判断是否有定时器了,如果有则不开启定时器
- 如果没有定时器则开启定时器,记得存在变量里面
- 在定时器里面调用要执行的函数,定时器里面要用time=null把定时器清空
// 手写节流函数
function throttle(fn,t){
let time=null
return function(){
if(!time){
time=setTimeout(function(){
fn()
// 在setTimeout中无法删除定时器,因为定时器还在运作,应使用time=null,而不是clearTimeout
time=null
},t)
}
}
}