所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
立即执行:定时器为空的时候才能执行函数,每次获得定时器的参数之后,立即设置定时器,在定时器内部设置n秒后再把定时器置空(才能再次触发回调)
1,防抖函数有三个参数,触发的函数,间隔的时间,是否立即触发
- 获得定时器和返回值(处理的结果),建立一个闭包,把该闭包返回
- 闭包内:
- 保存(要执行的函数的)this和参数,清除上一轮的定时器
- 判断是否为立即执行,
- 只有定时器为空的时候,取反(并设置定时器和置空时间)作为条 件,立即执行函数,(第一次进入的时候没有定时器)
- 如果不是立即执行:设置定时器,在定时器内给回调函数.apply
var count=1
var container=document.getElementById('container')
//触发的函数
function addcount(e){
container.innerHTML=count++
}
//鼠标移动,300ms后触发
let action=fd(addcount,1000,true)
container.onmousemove=action
//取消按钮
let btn=document.getElementById('btn')
btn.onclick=function(){
action.cancel()
}
//防抖函数
function fd(func,wait,immediate){
//定时器,返回值
let t,result
let callfunc=function(){
//this
const athis=this
//e
const args=arguments
//清除上轮的定时器
if(t){
clearTimeout(t)
}
//是否立即执行
if(immediate){
let call=!t
//置空定时器
t=setTimeout(function(){
t=null
},wait)
if(call){
result=func.apply(athis,args)
}
}else{
t=setTimeout(function(){
func.apply(athis,args)
},wait)
}
return result
}
//清除定时器
callfunc.cancel=function(){
clearTimeout(t)
t=null
}
return callfunc
}