节流

节流简单来说就是在重复的多次点击当中，只执行第一次点击，在第一次点击完成前，后面的点击都会无效

function throttle(fn, delay) {
    let timer = null;//通过闭包使变量timer存在着

    return function () {
        let context = this; //使下面的apply有正确的指向
        let args = arguments;

        if (!timer) {
            timer = setTimeout(function () { 
                //使用箭头函数，就不用使用apply来改变this指向
                fn.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
复制代码

防抖

防抖跟节流正好相反，防抖是在多次点击中，只执行最后一次，前面的点击都会被取消

function debounce(fn, delay) {
    let timer = null;

    return function () {
        clearTimeout(timer);
        let context = this;
        let args = arguments;

        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}
复制代码