节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

场景

• 滚动加载，加载更多或滚到底部监听
• 百度谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交

function throttle(fn, delay) {
    let previous = 0;
    // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
    return function() {
        let _this = this;
        let args = arguments;
        let now = new Date();
        if(now - previous > delay) {
            fn.apply(_this, args);
            previous = now;
        }
    }
}

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

场景

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 页面resize事件，常见于需要做页面适配的时候，因为只需要判断最后一次的变化情况

function debounce(fn, delay) {
    let timer; // 维护一个 timer
    return function () {
        let _this = this; // 取debounce执行作用域的this
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args); // apply指向调用debounce的对象，相当于_this.fn(args);
        }, delay);
    };
}