javascript 函数节流（读书笔记）

1. 函数节流基本概念

看书的时候发现一个非常有意思的概念，叫函数节流。这个名字听着很高级，实际上它是为了解决短事件内进行大量操作问题的。

通俗的理解方式就是，在开发中可能会出现，某些事件会在短事件内大量触发，例如resize、mouseover等等，这样大量操作DOM的事件会使浏览器挂起甚至崩溃，为了降低操作频率，使用函数节流的概念，让这种操作在某个特定的时间内，只执行一次

2. 两种实现方式

（javascript高级程序设计上的例子）

第一种情况使用字面量对象，将其进行封装：
其基本实现的思想其实就是定义一个定时器，把要进行的操作放入定时器内异步执行，如果在规定的时间之内重复操作，则将原来定义的定时器删除，重新设置新的定时器，这样强制用户必须要等一小段时间才能进行下一次操作。

const processor = {
	timeId = null,  //初始化定时器为空
	/** 在此定义实际要大量进行的操作 */
	realPerformance: function(){
		console.log("do something");
	},
	/** 在此定义清理函数 */
	process: function(){
		/** 首先要对之前的定时器进行清理 */
		clearTimeout(this.timeId);
		/**
		*定时器内是异步操作，要保存当前的上下文环境
		*否则里面的this实际上指向的是window对象
		*但是如果使用es6的箭头函数，则this为定义该函数时
		*的执行环境，所以不用再保存this对象
		*/
		//let that = this; 
		this.timeId = setTimeout(() => {
			this.realPerformance();
		}, 100);
	}
};

第二种写法实际上和第一种写法的思路是一样的，只不过简化的写法

/** 
 * 这里面要传入要进行的操作和上下文环境
 * 之所以要传入context是因为可能要进行的操作内部含有this
 * 如果没有环境，像下面那样直接执行相当于在window环境下执行
 * 可能会有问题
 */
function throttle(fn, context){
	/** 这里是把定时器定义在了函数对象上， 模拟静态变量 */
	clearTimeout(fn.tId);
	fn.tId = setTimeout(() => {
		fn.call(context);
	}, 100);
}