在封装防抖函数时,在网站上借鉴了下其它答主的办法,发现大家都是这样封装的:
function debounce(method,delay){
let myTimer=null;
return function(){
myTimer && clearTimeout(myTimer);
let self=this;
args = arguments;
var myTimer=setTimeout(function(){
method.apply(self,args)
},delay)
}
}
//示例:
window.onclick=debounce(function(){
console.log("点监听执行")
},1000)
这样写确实没有问题,但是当我们想使用事件对象的时候,会发现根本用不了,打印event 会是undefinded
所以这是为什么?
因为event是有存活期的,一旦过了存活期,便再访问不到,事件结束,事件对象被回收,而在防抖函数中我们使用了延时调用器,在里面我们是访问不到event的,但是我们要用,所以在延时调用器外面先把event存起来
这是我认为比较完美的防抖函数封装:
function debounce(method,delay){
let myTimer=null;
return function(){
myTimer&&clearTimeout(myTimer)
let self=this;
var event=self.event //此时event对象还存在与self指针中
self.event=event//这条语句的作用是将event对象保存下来,不被清除
args=arguments;
var myTimer=setTimeout(function(){
method.apply(self,args)
},delay)
}
}
window.onclick=debounce(function(){
console.log(event)
},1000)
打印结果:
现在就可以在method函数中使用事件对象了
节流函数封装:
function throttle(method,delay){
let lastime,start
return function(){
let self=this;
let args=arguments;
event=self.event;
self.event=event;
if(!start){
method.apply(self,args)
start=true;
lastime=Date.now()
}
else{
if(Date.now()-lastime>=delay){
method.apply(self,args);
lastime=Date.now()
}
}
}
}