浅谈JS的节流与防抖

函数节流

在一段时间内，只能触发一次函数，如在这段时间内多次触发，也只能执行一次。

举个栗子🌰
我们在打王者时，当英雄技能释放后，会有几秒cd时间，在这几秒内，不管再怎么点技能，都无效，cd时间结束后才能再释放。

function throttle(fn, delay) {
    let cd = false
    return function () {
        if (cd) {
        } else {
            fn()
            cd = true
            setTimeout(()=>{
                cd = false
            },delay)
        }
    }
}
const throttled = throttle(()=>console.log('hi'),3000)
 throttled()
 throttled()

节流应用场景：
防止用户连续频繁的点击事件，如提交按钮。

函数防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
可以说是“在短时间内多次触发同一个函数，只执行最后一次。”
举个栗子🌰
打王者时，血量不够了，需要几秒钟回城，那么如果在回城过程中被打断了，就要重新开始回。

function debounce(fn, delay){
     let timerId = null
     return function(){
         const context = this
         if(timerId){window.clearTimeout(timerId)}
         timerId = setTimeout(()=>{
             fn()
             timerId = null
         },delay)
     }
 }
 const debounced = debounce(()=>console.log('hi'),1000)
 debounced()
 debounced()

防抖应用场景：
用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求。

总结

函数节流是间隔时间执行，函数防抖是某段时间内只执行一次，这两种手段都能降低回调频率，节省资源，优化性能。