JS 防抖

没有防抖：

var count = 1;
var container = document.getElementById('container');

function getUserAction() {
    container.innerHTML = count++;
};

container.onmousemove = getUserAction;

此时，鼠标移动，getUserAction方法就会频繁的被触发。酱紫可不好，浪费资源是吧。

防抖优化的第一版代码

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

// 这里用了高阶函数trick，还用了闭包
container.onmousemove = debounce(getUserAction, 1000);

函数解析：

函数内部，保存了timeout这个延迟函数（定时器），然后返回了一个匿名函数作为container.onmousemove的响应函数。

当用户有鼠标移动的动作的时候，首先清理定时器，然后，新建一个定时器，在wait时间后，才执行getUserAction。

这样，如果在wait时间内，鼠标移动函数又一次被触发，上一个定时器就被清理，然后重新建立一个新的定时器，在wait时间后执行getUserAction。

这样的结果就是，只有在wait时间内，鼠标动作没有被再次触发，函数getUserAction才会被执行。

this和event

使用了debounce函数，可能会导致this丢失，我们需要修改一下代码：

// 第二版
function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this; // 作为事件的直接响应函数，此时，this依旧指向document.getElementById('container')元素

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context) // apply函数可以修改函数this的指向
        }, wait);
    }
}

下面，我们想办法把event也传进去

event会作为debounce函数返回的匿名函数的参数。

// 第三版
function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;
        var args = arguments;

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

于是我们修复了两个问题：this指向，event对象。