防抖和节流

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