背景
设想,我们直接地将一些事件处理程序绑定在诸如resize、scroll这样的事件上。可想而知的是,无论我们多么的小心,在改变窗口大小或者滚动时,事件会以一个高频率触发。要是监听这样的事件进行dom操作,那么势必会引起性能的高消耗。而且,问题是,我们往往也并不需要这样的事件一直高频率触发。
函数去抖应运而生。
去抖 debounce
简单来说的意思就是,使函数的调用延迟一段时间执行,在这段时间内如果又发生调用则重置延迟的时间。也就是说,一段时间过去后,只会发生一次调用。
去抖的实现和例子
function debounce(fn, delay) {
var timer = null;
// 返回一个包装后的函数
return function () {
// 保存this的指向,args即函数的参数
var context = this,
args = arguments;
// 清除定时器,这个是这个去抖实现的核心
clearTimeout(timer);
// 设置定时器,delay即是延迟
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
function print(){
console.log(1);
}
debounce(print,5)
var a = debounce()
// 把经过去抖函数包装后的函数绑定到事件上
window.addEventListener('scroll', debounce(print,1000))