防抖 debounce
定义
所谓防抖就是触发事件之后，将多次触发合并成一次执行，即在规定时间内回调函数只执行一次，如果在时间内事件被触发，则该回调函数的执行时间从触发时重新计算。
适用场景
- mousemove 鼠标滑动事件
- input 输入事件
代码实现
function debounce(fn, delay){
let timer
return function(){
if(!timer){ //如果定时器不存在，就定一个
timer = setTimeout(()=>{
fn.apply(this, arguments) //不绑定this，这里的箭头函数会指向window
},delay)
}else{
//如果定时器存在，就清除掉，再定一个
clearTimeout(timer)
}
}
}
思路分析
触发事件-->存在定时器-->清除定时器-->下次触发重新定一个
触发事件-->不存在定时器-->定一个delay时间后执行的定时器-->执行回调函数
节流 throttle
定义
事件多次触发，只在一定时间内执行一次，只有在大于规定时间后才会再次触发。
适用场景
- 商品搜索列表、商品橱窗等
- 用户滑动时 定时 / 定滑动的高度 发送请求
代码实现
设置一个标识，表示是否处于规定时间内
function throttle(fn, delay){
let flag = true
return function(){
if(flag){
setTimeout(()=>{
fn.apply(this, arguments)
flag = true
},delay)
}
flag = false
}
}
根据时间判断
function throttle(fn, delay){
let time = 0
return function(){
let now = new Date()
if(now-time > delay){ //两次触发事件的时间差大于delay则执行函数
fn.apply(this, arguments)
time = now //将此次的时间记下，用于下次对比
}
}
}
思路分析
都是判断是否在规定时间内，在时间内就执行函数，然后改变状态。不在就跳过。
