防抖:指触发事件后在n秒内函数只执行一次,若在n秒内再次触发则重新计算
节流: 连续发生的事件在n秒内只执行一次函数
防抖debounce
1.输入完毕后过2秒后在查询(延迟执行)
function debounce(func,delay){
let timeout; //定时器
return function(){
if (timeout) cleaTimeOut(delay)//取消之前的任务
timeout = setTimeOut(function(){
fun.apply(this,arguments)//执行fun函数
},delay)
}
}
2.输入完毕后立即查询,过2秒才能在查询(立即执行)
function debounce(func,delay){
let timeout; //定时器
return function(){
if (timeout) cleaTimeOut(delay)//取消之前的任务
let callNow = !timeout
timeout = setTimeOut(function(){//增加一个定时器
timeout = null
},delay)
if (callNow) fun.apply(this)//第一次执行
}
}
节流 throttle
function throttle (func,delay){
let timout;//定义定时器句柄
return function (){
if (!timeout){//是否存在定时器
timout = setTimeOut(()=>{//创建定时器
timeout = null
func.apply()
},delay)
}
}
}
使用时间戳
function throttle (func,delay){
let prev = 0 //上次记录的时间
return function (){
let now = Date.now()//当前时间
if (now - prev > delay){
func.apply(this)//执行函数
prev = now//重置上次记录时间
}
}
}