手写防抖与节流

防抖（防止抖动）

举个栗子：回城有倒计时(回城被打断)

当被对手攻击，回城时间又要重新倒计时（非规律性）

总结：如果持续触发事件，一段时间之后只触发一次。

实现如下：

function debounce(fn,delay){
    let timer = null  
    return function(){
        if(timer){window.clearTimeout(timer)}
        timer = setTimeout(()=>{
            fn.call(this,arguments)
            timer=null
            },delay)
        }
	
}

const fn = debounce(()=>console.log('呜呜呜，终于回城啦'),3000)
fn()

应用场景：鼠标滑动事件

节流 （控制流量）

执行一次要等待一段时间才会再次执行。

举个栗子：施法有冷却时间（技能冷冻）

当玩家发功之后得等待一段时间之后才能再次发功。（具有规律性）

总结：如果持续触发事件，一段时间后，只执行一次事件。

实现如下：

function throttle(fn,delay){
    let timer = null
    return function(){
        if(timer) return
        fn.apply(this,arguments)
        timer = setTimeout(()=>{
            timer = null
            },delay)
	}
}

const fn = throttle(()=>console.log('又能发动技能了'),3000)
fn()

应用场景：埋点场景。比如说滚动到一定的高度发送埋点请求