上一篇写了防抖,现在来写一下节流,节流函数是在一段时间内多次触发某个事件,但是在这一段时间内只执行一次,下面我们来实现一个 按钮在 N 秒之内点击多次,但是却执行一次,话不多说,上代码.
// 首先,我们在 html 里面 写一个按钮
<button id="button">点我点我快点我</button>
和防抖一样,还是使用 setTimeout 来实现,按钮点击,创建延时,但是在延迟没有执行的情况下,我们不能再次创建延迟
let button = document.querySelector("#button")
button.addEventListener("click",()=>{
thro()
})
let timer=null;
function thro(){
if(timer) return
timer=setTimeout(()=>{
console.log('哈哈哈哈,我被点击了');
// 将 timer 重新赋值为 null,因为我们在上面根据 timer 做判断,是否进行下面的逻辑,如果不重新初始化 timer 的值,那么 timer 将一直为 true ,我们这个方法执行一次也就不会再执行了
timer=null
},1000)
}
上面这个方法应对这个业务逻辑是没有问题的,但是如果我们想要方法变得更通用一些,为了以后我们能够拿来即用,需要进行一下封装,提高复用性,下面我们来封装一下.这里会使用到闭包,因为我们需要 timer 是一直在内存当中的,如果还像上面那样放在全局,封装的函数就没有太大的意义
方案1:
let button = document.querySelector("#button")
let throFunc = thro((value) => {
console.log("value", value);
}, 1000);
button.addEventListener("click",()=>{
thro('哈哈哈,我被点击了')
})
function thro(callback,delay){
let timer=null;
// 此处的 value,我们可以在调用的时候传给回调函数 callback
return function(value){
if(timer) return
timer=setTimeout(()=>{
callback(value)
timer=null
},delay)
}
}
方案2:
let button = document.querySelector("#button")
let throFunc = thro(1000);
button.addEventListener("click",()=>{
thro(()=>{console.log('哈哈哈哈,我被点击了')})
})
function thro(delay){
let timer=null;
return function(callback){
if(timer) return;
timer = setTimeout(()=>{
callback();
timer=null
},delay)
}
}
方案3,使用 时间戳
let button = document.querySelector("#button")
let throFunc = thro(1000);
button.addEventListener("click",()=>{
thro(()=>{console.log('哈哈哈哈,我被点击了')})
})
// 这个方法和上面俩不同的是第一次点击会被触发
funtion thro(delay){
let time=null;
return function(callback){
let currentTime = new Date().getTime();
if(currentTime-time>=delay){
callback();
time=new Date().getTime();
}
}
}
