防抖

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

设计思路

每次触发高频事件的时候，清除定时器，然后重新设置新的定时器。

应用场景

• 输入框search搜索联想，用户在不断输入值时触发input事件，用防抖来节约请求资源。
• window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

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

节流

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

应用场景

• 鼠标不断点击触发，click/mousedown(单位时间内只触发一次)
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

function throttle (fn, delay) {
    var last = 0;
    return function () {
        var now = +new Date();
        if (now - last > delay) {
            fn.apply(this, arguments);
            last = now;
        }
    }
}

节流与防抖的区别

节流与防抖的前提都是某个行为持续地触发，不同之处只要判断是要优化到减少它的执行次数还是只执行一次就行。

• 防抖例子，像仿百度搜索，就应该用防抖，当我连续不断输入时，不会发送请求；当我一段时间内不输入了，才会发送一次请求；如果小于这段时间继续输入的话，时间会重新计算，也不会发送请求。
• 节流例子，像dom的拖拽，如果用消抖的话，就会出现卡顿的感觉，因为只在停止的时候执行了一次，这个时候就应该用节流，在一定时间内多次执行，会流畅很多。