debounce-throttle

防抖

• 单位时间内，对于连续触发的事件，只执行最后一次.
• 利用定时器，每次触发前清除掉之前的定时器 (重新开始)

防抖应用场景：

1. 文本输入
2. 编辑器的实时保存

节流

• 单位时间内，对于连续触发的事件，只执行一次.
• 利用定时器，等待定时器执行完毕，才开启定时器

节流应用场景：

1. 快速点击，
2. 鼠标滑动，
3. scoll
4. resize

如果希望实时变化，使用节流，如果希望在不变化了后在重新调用接口，就需要使用防抖，所以这需要看具体的使用场景。

5. 下拉加载
6. 视频播放的时间记录

其实分为立即执行和非立即执行，只不过由于 delay 的值一般设置的都会很小，一般感知不到，所以普遍用的都是非立即执行版本 (通过定时器去延缓执行函数). 而立即执行函数是借助定时器延缓的 timerId, 而不是函数了。

function debounce(fn: Function, delay: number) {
    let timerId: ReturnType<typeof setTimeout>;

    return function(...args: any[]) {
        clearTimeout(timer); // 对于不判断定时器是否存在，直接进行 clear
        timerId = setTimeout(() => {
        fn(...args)
        }, delay)
    }
}

function throttle(fn: Function, delay: number) {
    let timerId: ReturnType<typeof setTimeout>;

    return function (...args, any[], delay) {
        // 如果定时器不存在，再运行函数
        if(!timerId) {
            timerId = setTimeout(() => {
            fn(...args)
            // 函数结束后，置空定时器
            timerId = null;
            }, dealy)
        }
        }
    }