JavaScript 防抖函数 封装

防抖:将一定时间段内的多次高频操作优化为只在最后一次执行
业务中简单的防抖:

<input type="text" id="input">

现在我们对input输入框的输入数据做防抖操作,持续输入的情况下在最后一次 keyup 触发的一秒钟之后打印输入框的结果;

// 获取 DOM 元素
let input=document.querySelector('#input');
//给DOM元素添加 keyup 事件
input.addEventListener('keyup',(e)=>{
debounce(e.target.value)
})
// 定义一个变量,我们需要使用 setTimeout() 延时定时器
let timer=null;
function debounce(value){
 if(timer) clearTimeout(timer)
 timer=setTimeout(()=>{
   console.log(value)
 },1000)
}

上面这些样虽然可以实现我们对于input输入框的防抖,但是并不通用,在平常的开发中,项目里面的很多场景需要使用到防抖,如果我们按照上面这边写,在每一个需要使用防抖的逻辑中都要写一堆这样的处理逻辑,对我们来说是很繁琐的,懒是我们进步的一大动力,为了能够我么的防抖能够适用不同的场景,我们需要把防抖函数进行一下封装,我们希望把我们的业务处理逻辑作为一个函数传给防抖方法,那么我们只需引入一个防抖的函数,其余的重点就可以放在我们的业务逻辑上面,减少重复开发,下面我们来看一下防抖函数的封装,改造一下上面的方法

// 获取 DOM 元素
let input=document.querySelector('#input');
//给DOM元素添加 keyup 事件

let debounceFunc=debounce((value)=>{console.log(value)},1000,false)
input.addEventListener('keyup',(e)=>{
	debounceFunc(e.target.value)
})
// 既然是要做封装,那么我们的 timer 就不能上上面的例子那样放在 window 上面,但是我们又需要 timer 一直在内存当中, 这个时候闭包则刚好可以帮我们实现,闭包会 return 一个函数
// callback (fn) 回调函数
// delay (Number) 延迟执行的时间,单位: 毫秒
// immediately (Boolean)  是否立即执行
function debounce(callback,delay,immediately){
	let timer=null
	return function(value){
	// 如果 immediately 为true  则立即执行
		if(immediately){
			callback(value)
		}else{
		// 当在时间没有超过 delay 的时长,清除之前的 timer ,重新计时
			if(timer) clearTimeout(timer);
			timer=setTimeout(()=>{
				callback(value)
			},delay)
		}
	}
}

上面的封装是将 callback 作为 debounce 的一个参数,下面我们来换一种写法,将 callback 作为 return 出去的函数的参数,各位看官,您往下瞧

// 获取 DOM 元素
let input=document.querySelector('#input');
//给DOM元素添加 keyup 事件

let debounceFunc=debounce(1000,false)
input.addEventListener('keyup',(e)=>{
	debounceFunc(()=>{
	console.log(e.target.value)
	})
})
// 既然是要做封装,那么我们的 timer 就不能上上面的例子那样放在 window 上面,但是我们又需要 timer 一直在内存当中, 这个时候闭包则刚好可以帮我们实现,闭包会 return 一个函数
// callback (fn) 回调函数
// delay (Number) 延迟执行的时间,单位: 毫秒
// immediately (Boolean)  是否立即执行
function debounce(delay,immediately){
	let timer=null
	return function(callback){
	// 如果 immediately 为true  则立即执行
		if(immediately){
			callback()
		}else{
		// 当在时间没有超过 delay 的时长,清除之前的 timer ,重新计时
			if(timer) clearTimeout(timer);
			timer=setTimeout(()=>{
				callback()
			},delay)
		}
	}
}

打印出来的结果依然是完美,话不多说,感谢各位看官给予足够的耐心,看到了最后的结尾! 给你小心心哦!