一个例子 - 看懂js中防抖和节流的实现

防抖

事件触发后延时一段时间执行，在这期间事件又触发，则取消之前事件执行，继续延时一段时间后才执行
一般用在输入框输入文字验证，输入完一段时间后验证

function debounce(fn,delay) {
    var timer = null;
    return function() {
        var that = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(that, args);
        },delay)
    }
}

节流

事件触发后延时一段时间执行，在这个期间事件又触发，会无视这些事件，只有当一开始延时时间到后才能再次触发
一般用在一些频繁触发的事件，比如resize, 在一段时间内只执行一次操作，防止页面一直渲染性能低下

function throttle(fn, delay) {
    var canRun = true;
    return function() {
        if (!canRun) return;
        var that = this;
        var args = arguments;
        canRun = false;
        // 这里可以用箭头函数就不用缓存this
        setTimeout(function(){
            fn.apply(that,args);
            canRun = true;
        }, delay);
    }
}

总结

其实基本思路都一样，延时执行函数，只是防抖是一段时候后执行，有重复事件则顺延，节流是在这段时间无视所有事件