没有防抖:
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对象。