js防抖和节流优化

防抖和节流的作用都是防止函数多次调用，提高性能，区别在于，当不断触发函数的时候，防抖是在设定的时间（参数wait）内，只会触发一次，节流是每隔设定的时间（参数wait）触发一次。

一、防抖

// 防抖 简单函数封装
/*
* func 传入的防抖函数 
* wait 延时执行时间 默认50毫秒
* */
const debounce = function(func,wait=50){
	// 存一个时间id
	let timer = 0;
	// 返回一个用户调用的防抖执行函数
	return function(...args){
		if(timer){   //如果已经设置定时器，就清空上一次定时器
			clearTimeout(timer)
		}
		// 开启新的定时,延时执行
		 timer = setTimeout(()=>{
			 func.apply(this,args)
		 },wait)
	}
}

demo 使用

<div class="box">
	<button id="btn">点我</button>
	<div id="num">0</div>
</div>
<script>
let btn = document.getElementById('btn')
let txt = document.getElementById('num')
let num = 0;
const add = function(){
	num++
	txt.innerText = num
	console.log(num)
}
// btn.onclick = add //原调用点击直接加，点多快加多块
			
// 防抖 简单函数封装
/*
* func 传入的防抖函数 
* wait 延时执行时间 默认50毫秒
* */
const debounce = function(func,wait=50){
	// 存一个时间id
	let timer = 0;
	// 返回一个用户调用的防抖执行函数
	return function(...args){
		if(timer){   //如果已经设置定时器，就清空上一次定时器
			clearTimeout(timer)
		}
		// 开启新的定时,延时执行
		 timer = setTimeout(()=>{
			 func.apply(this,args)
		 },wait)
	}
}		
btn.onclick = debounce(add,300)  //快速点击也是需要300毫秒才会执行
</script>

二、节流

// 节流函数封装
/*
*func 需要节流的函数
* wait 等待时间
* */
const throttle = function(func,wait=50){
	let lastTime = 0  //上一次执行函数的时间
	return function(...args){
		let nowTime = +new Date() //当前时间
		if(nowTime-lastTime>wait){ //当前时间和上一次执行函数时间比较，如果大于等待的时间则执行
			lastTime = nowTime
			func.apply(this,args)
		}
	}
}

demo 使用

setInterval(
   throttle(()=>{
   	console.log('111')
   },2000),
   10
)

ps: 上面节流demo执行后发现，原本应该10毫秒执行打印一次的，通过节流，实现了2秒打印一次，后续可以根据项目场景使用，如果不想让页面滚动的时候一直触发函数，这里就可以采用节流，让每隔多少秒才触发函数一次。