防抖和节流****
一、防抖
1、防抖：单位时间内，频繁触发事件，只执行最后一次
2、使用场景：
A:搜索框搜索输入。只要用户最后一次输入完，再发送请求
B:手机号、邮箱验证输入检测
3、防抖函数步骤
A:声明定时器变量
B:每次鼠标移动（事件触发）的时候要先判断是否有定时器，如果有先清除以前的定时器
C:如果没有定时器。则开启定时器，存入到定时器里面
D:定时器里面写函数调用
function debounce(fn,t){
let timer
return function(){
if(timer) clearInterval(timer)
timer=setTimeout(function(){
fn()
},t)
}
}
box.addEventListener('mousemove',debounce(mouseMove,500))
二、节流
1、节流：单位时间内，频繁触发事件，只执行一次
2、使用场景:高频事件：鼠标移动（mousemove）、页面尺寸缩放resize、滚动条滚动scroll
3、节流函数的步骤
A:声明一个定时器变量
B:当鼠标每次滑动先判断是否有定时器，如果有定时器则不开启定时器
C:如果没定时器则开启定时器，记得存在变量里面
定时器里面调用执行函数
定时器里面把定时器清空
box.addEventListener('mousemove',throttle(mouseMove,500))
function throttle(fn,t){
let timer=null
return function(){
if(!timer){
timer=setTimeout(function(){
fn()
timer=null
},t)
}
}
}
