【Vue】防抖、节流的实现

debounce：防抖，n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
throttle：节流， n 秒内只运行一次

防抖实现：若是immediate: true的情况，需要控制timeout来使callNow在函数第一次执行和以后隔n秒后为true。对于不用立刻执行的，只需要简单setTimeout执行fn

function debounce(fn, wait, immediate) {
    let timeout;
    return function() {
        let context = this;
        if (timeout) clearTimeout(timeout); //每次新触发且旧计时未结束，重新计时
        if (immediate) { //考虑immediate：true的情况
            let callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null; //使callNow为true的条件
            }, wait);
            if (callNow) fn.apply(context, arguments);
        } else {
            timeout = setTimeout(() => {
                fn.apply(context, arguments)
            }, wait);
        }
    }
}

节流实现：设置startTime，并获取currentTime，计算是否已隔n秒。

function throttle(fn, delay) {
    let timer = null;
    let startTime = Date.now();
    return function() {
        let currentTime = Date.now();
        let remaining = delay - (currentTime - startTime);
        let context = this;
        clearTimeout(timer)
        if (remaining <= 0) {
            fn.apply(context, arguments);
            startTime = Date.now();
        } 
        else {
            timer = setTimeout(() => {
                fn.apply(context, arguments);
                startTime = Date.now();
            }, remaining);
        }
    }
}