防抖和节流的作用都是防止函数多次调用,提高性能,区别在于,当不断触发函数的时候,防抖是在设定的时间(参数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秒打印一次,后续可以根据项目场景使用,如果不想让页面滚动的时候一直触发函数,这里就可以采用节流,让每隔多少秒才触发函数一次。