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对象。