JavaScript 节流函数封装

上一篇写了防抖,现在来写一下节流,节流函数是在一段时间内多次触发某个事件,但是在这一段时间内只执行一次,下面我们来实现一个 按钮在 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();
		}
	}
}