function debounce(fn, delay = 300) {
    // 创建一个闭包变量，也是用于接收定时器API的返回值
    let timer = null;
    return (...args) => {
        // 如果有旧的定时器，则清除掉
        if (timer) {
            clearTimeout(timer);
        }
        // 定义新的计时器
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

// 创建一个防抖函数实例
const fn = debounce(console.log, 300);

for (let i = 0; i < 10; i++) {
    fn(i); // 9
}
// 这里，fn函数实际上只真正执行一次，前面9次的执行，都被 clearTimeout 了。

function throttle(fn, delay = 300) {
    // 创建一个闭包变量
    let timer = null;
    // 返回一个函数，即通过 throttle 创建的节流实例，
    return (...args) => {
        // 实例被事件触发
        // 如果没有等待执行的事件，则用定时器在规定时间内执行一次事件。
        // 如果有在执行的事件，则本次触发，不做响应。
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args);
                clearTimeout(timer);
                // 执行完后将 timer 重置，这样就可以接收下一次事件触发
                timer = null;
            }, delay);
        }
    };
}

const fn = throttle(console.log, 1000);
let count = 0;

const timer = setInterval(() => {
    console.log('interval... 300ms');
    fn('throttle... 1000ms');

    count++;
    if (count > 20) {
        clearInterval(timer);
    }
}, 300);