防抖（debounce）与节流（throttle）

防抖

原理：在事件触发n秒后，执行方法。如果在n秒内被重新触发，则重新开始计时。结果就是将频繁的事件合并成一次。
例如：电梯每5秒会开始运作。如果在5秒内，有人进来，则重新计时，直到超过5秒。
场景：input输入数据请求服务
实现：

function debounce(fn,wait) {
    let timer; // 计时器
    return function () {
        // 重置计时器
        clearTimeout(timer); 
        timer= setTimeout(() => {
            fn.apply(this, arguments);
        }, wait);
    };
}

节流

原理：事件在触发n秒内，执行方法。如果n秒内再次触发，不重置。结果是将一定时间内的重复事件合并成一次。
场景：上拉加载数据
实现：
1. 定时器

function throttle(fn, wait) {
    var timer;
    return function() {
        if (!timer) {
            timer = setTimeout(function(){
                timer = null;
                fn.apply(this, arguments)
            }, wait)
        }
    }
}

2. 时间戳

function throttle(fn, wait) {
    var previous = 0;
    return function () {
        var now = Date.now();
        if (now - previous > wait) {
            fn.apply(this, arguments);
            previous = now;
        }
    }
}

小结

防抖的思想是在一系列高频操作结束后，等待一定时间后执行一次。节流是在一定时间内，只执行一次。