防抖 & 节流

在前端开发中，有一部分的用户行为会频繁地触发事件执行，从而对DOM操作，资源加载等耗费性能的处理很可能导致页面卡顿甚至浏览器崩溃。

函数节流（throttle）和函数防抖（debounce）就是为了解决类似需求应运而生的。

---

节流：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。

场景：

1. 窗口调整（resize）
2. 页面滚动（scroll）
3. 抢购疯狂点击（mousedown）

例子：

// 显示数字的div
var oDiv = document.getElementById('show');
// 按钮
var oBtn = document.getElementById('btn'); 

function throttle(handler, wait) {
    // 最近的一次点击时间
    var lastTime = 0;
    // onclick 的事件执行函数（这里形成了一个闭包）
    return function(e) {
        // 当前时间
        var nowTime = new Date().getTime();
        if(nowTime - lastTime > wait) {
            // 修正this指向和事件对象参数
            handler.apply(this, arguments);
            lastTime = nowTime;
        }
    }
}

function buy(e) {
    console.log(this, e);
    oDiv.innerHTML = parseInt(oDiv.innerHTML) + 1;
}

oBtn.onclick = throttle(buy, 1000);

---

防抖：在函数需要频繁触发时，只有足够空闲的时间才执行一次。

场景：

1. 实时搜索（keyup）
2. 拖拽（mousemove）

例子：

var oInp = document.getElementById('inp');

function debounce(handler, delay) {
    var timer = null;
    // 事件处理函数（闭包）
    return function() {
        var _self = this;
        var _arg = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            // 修正this指向和事件对象参数
            ajax.apply(_self, _arg);
        }, delay); 
    } 
}

function ajax(e) {
    console.log(e, this.value);
}

oInp.oninput = debounce(ajax, 1000);