一张图搞清楚防抖和节流的区别

1、防抖（debounce）

指在时间n内，函数被触发多次，但是只执行一次，执行最新的触发。也就是在时间n内，碰到新的触发，就清除之前的，重新计时。

最简单的实现

function debounce(func, wait) {
    var timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(func, wait);
    }
}

修改this指向的

function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context)
        }, wait);
    }
}

2、节流（throttle）

当持续触发某个事件时，会有规律的每隔时间n就执行一次函数。

最简单的实现

function throttle(func, wait) {
    var context, args;
    var previous = 0;

    return function() {
        var now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
        // 时间没到，啥都不干
    }
}

3、区别

对新触发执行的时间点不一样

文中代码来自于：

JavaScript专题之跟着 underscore 学防抖
JavaScript专题之跟着 underscore 学节流