简单的防抖和节流代码思路解释

备注：以下仅为防抖和节流代码思路解释，实际应用中需根据需要做相应调整。仅供参考。

防抖

const debounce = (fn, delay) => {
    let timeout = null;
    return (...rest) => {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, rest);
        }, delay);
    };
};

代码解释：
1.第一次进入防抖方法，设置定时器，延时执行方法fn。
2.第二次进入防抖方法，timeout条件符合 则清除定时器，fn方法被清掉。
3.除非某次执行的速度晚于延时（delay）的时间，才执行一次fn方法
4.以此达到防抖的效果。
总结：防抖就是在多次连续执行方法时（如连续请求接口），通过定时器延时，符合延时时机的时候，才执行一次方法（接口请求）。如果在延时时间内请求，则重新开启定时器。

节流

// 定时器版节流
const throttle = (fn, delay) => {
    let timeout = null;
    return (...rest) => {
        if (!timeout) {
            fn.apply(this, rest);
            timeout = setTimeout(() => {
                timeout = null;
            }, delay);
        }
    };
};

代码解释：
1.第一次进入节流方法，timeout条件符合，执行fn方法。
2.设置定时器timeout，条件变为不符合。
3.定时器延时（delay）设置timeout为null，条件变为符合。
4.进而执行一次fn方法。
总结：节流就是在多次连续执行方法时（如滚动条执行事件），通过定时器延时，每隔一段时间，才执行一次方法。即每隔一段时间执行一次。

// 时间戳版节流
const throttle = (fn, delay) => {
    let last = 0;
    return (...rest) => {
        const now = Date.now();
        if (now >= delay + last) {
            fn.apply(this, rest);
            last = now;
        }
    };
};

代码解释：
1.第一次进入节流方法，条件符合，设置当前时间戳，执行fn方法。
2.第二次进入节流方法，新的时间戳大于等于延时（delay）加上次时间戳，则条件成立继续执行fn方法。
3.中间延时（delay）的时间间隔，即达到了节流的作用。

总结：节流就是在多次连续执行方法时（如滚动条执行事件），通过时间戳和延时相加对比，大于时间间隔的，才执行一次方法。即每隔一段时间执行一次。