web性能优化之事件节流

问题：鼠标滚轮滚动一下，scroll事件触发了12次

document.addEventListener('scroll',function(){
	console.log('hello')
})

事件节流背后的思想是指：某些代码不可以在没有间断的情况下连续重复执行，第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码，第二次调用该函数时，它会清除前一次的定时器，并设置一个，如果前一个定时器已经执行过了，这个操作就没有任何意义，然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，目的是只有在执行函数的请求停止了一段时间之后才执行。

改进后的代码如下：

var processor = {
    timeoutId:null, // 定义一个定时器
    performProcessing:function(){  // 实际待操作的代码
	    console.log('hello')
    },
    process:function(){  // 初始化调用的代码
	clearTimeout(this.timeoutId);   // 清除定时器
	var me = this; // 变量替换
	this.timeoutId = setTimeout(function(){  // 设置定时器调用待操作的代码
		me.performProcessing();
	},100)
    }
}

// 绑定事件scroll, 调用回调函数，processor.process(), 并且绑定环境processor这个对象		
document.addEventListener('scroll',processor.process.bind(processor)); 

使用事件节流的其他情况： 

例如：IE中使用的onresize事件，当调整浏览器大小的时候，该事件会连续触发，假如在onresize 事件处理程序内部如果尝试进行dom操作，其高频率的更改可能会让浏览器奔溃。