节流防抖的实现与使用要点

节流（thorrtle）：触发后一段时间内不能再次触发，典型应用：游戏中的技能冷却时间

export default function thorrtle(callback: () => void, wait: number):()=>void{
    // 节流典型应用：游戏中的技能冷却时间
    let timer=0;
    return function () { // 注意这里返回的是一个function
        console.log(333)
        // 有定时器没跑完就什么都不做
        if (timer>0) {
            return;
        }
        timer = window.setTimeout(() => {
            console.log(222)
            // 时间到后初始化定时器，不必频繁清除定时器
            timer = 0;
            if (callback) {
                callback()
            }
        }, wait);
    }
}

防抖（debounce）：只响应最后一次操作，中间的操作都会重置定时器

export default function debounce(callback: () => void, wait: number):()=>void {
    // 防抖就是只响应最后一次操作，中间的操作都会重置定时器
    let timer = 0
    return function () { // 注意这里返回的是一个function
        if (timer>0) {
            clearTimeout(timer);
            timer = 0
        }
        timer = window.setTimeout(() => {
            //初始化timer
            timer = 0
            if (callback) {
                callback()
            }
        }, wait);
    }
}

使用要点：不能在函数中直接调用节流/防抖函数！