防抖、节流（亲测有效）

• 防抖（一段时间内，只执行最后一次。通俗点，不管你点多少次，执行最后一次）
• 节流（每段时间内，只执行一次。通俗点，你一直点一直点，会每隔一个固定时间执行一次）

防抖

解释：“一段时间内，只执行最后一次”：比如，2s内点击按钮6次，那么防抖只会执行第六次点击事件，前面五次不会执行。

原理：通过定时器实现，每点击一次按钮，将该点击事件放入定时器，2s之后执行，此时若再次点击按钮，<u>就清除第一次设置的定时器</u>，重新设置一个新的2s定时器，以此类推，直到最后一次点击，2s之后启动该定时器事件，达到防抖效果。

代码实现：

function Debounce(fn, t) {
    let delay = t || 2000; // 默认2s
    let timer;
    return function () {
        let args = arguments;
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            timer = null;
            fn.apply(this, args);
        }, delay);
    }
}

节流

解释："每段时间内，只执行一次"：比如，一直点击一个按钮，会每隔一个interval执行一次点击事件。

原理：通过定时器事件，第一次点击，则立即执行该点击事件，在interval内，再次点击，则会将该事件放入定时器，在interval内如果再再点击，则清除上一个定时器，重新设置一个定时器。超过了interval，那么就直接执行该事件。

代码如下：

 const Throttle = (fn, t) => {
    let last;
    let timer;
    let interval = t || 2000;
    return function () {
        let args = arguments;
        let now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                last = now;
                fn.apply(this, args);
            }, interval);
        } else {
            last = now;
            fn.apply(this, args);
        }
    }
}

个人见解：该方法存在弊端，并不是严格的每隔一段时间内执行一次该方法。

比如：设置interval为3000，第一次点击直接执行（坐标设为0），2s后第二次点击（坐标设为2），此时设置了一个定时器，3s之后执行（即在坐标5执行），4s后第三次点击（坐标为4），此时为立即执行，但是注意到有一个定时器会在坐标5处执行，且并未清除，那么在坐标4，坐标5都会执行该事件，这就造成了不是严格按照interval执行事件了。