防抖和节流

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频时间再次被触发，则重新计算时间。

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

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀疏函数的执行频率

定时器实现

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, delay)
    }
}

时间戳实现

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

相同点

1. 都可以通过使用setTimeout实现
2. 目的都是，降低回调执行频率。节省计算资源

不同点

1. 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
2. 防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

防抖的应用场景

连续事件，只需要触发一次的回调场景有：

1. 搜索框搜索输入。只需用户最后一次输入完，再发送请求
2. 手机号、邮箱验证输入检测
3. 窗口大小Rersize。只需要窗口调整完成后，计算窗口大小。防止重新渲染

节流的应用场景

间隔一段时间执行一次回调的场景有：

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