手写节流防抖

节流和防抖是前端开发中常用的两种优化技术，用于控制事件触发的频率，提高性能和用户体验。

节流（throttling）是指限制事件触发的频率，例如每隔一定的时间或执行一定次数才会触发一次事件。例如游戏中的闪现技能，CD冷却后才能再次触发。常见的场景包括滚动、拖拽、搜索框输入等。通过节流，可以避免事件频繁触发导致的性能问题和过多的网络请求等问题。

防抖（debouncing）是指在事件触发后，设定一个延迟时间，在这个延迟时间内如果事件再次触发，则重新计时，直到延迟时间结束再真正执行事件。例如游戏中的回城技能，技能被打断后必须重新执行才可。常见的场景包括输入框输入、窗口大小改变等。通过防抖，可以避免事件频繁触发导致的性能问题和不必要的操作。

简单来说，节流是控制事件触发的频率，防抖是控制事件触发的次数。

手写节流

// 想象一下玩游戏时闪现技能的使用
const throttle = (fn, time) => {
    let 冷却中 = false
    return (...args) => {
        if(冷却中)return
        fn.call(undefined, ...args)
        冷却中 = true
        setTimeout(()=>{
            冷却中 = false
        }, time)
    }
}

const f = throttle(()=>{console.log('hi')}, 3000)
f() // 打印 hi
f() // 打印 undefined（技能冷却中）

手写防抖

// 想像一下玩游戏时回城技能的使用
const debounce = (fn, time) => {
    let 回城计时器 = null
    return(...args)=>{
        if(回城计时器 !== null){
            clearTimeout(回城计时器) // 中断回城
        }
        // 重新回城
        回城计时器 = setTimeout(()=>{
            fn.call(undefined, ...args) // 回城后调用 fn
            回城计时器 = null
        }, time)
    }
}

const f = debounce(()=>{console.log('hi')}, 3000)
f() // 3s后打印出hi，若3s内再次调用则在最后一次调用后3s打印hi