高级定时器

/**
 *高级定时器 
 * 
 * 2016-07-14
 */

/**
 *Yielding Processes 
 *数组分块技术 
 * 当某个循环占用了大量的时间，该处理不必须同步完成，项目的处理顺序不是很重要，可以使用定时器分割循环
 * 定义：小块小块的处理数据，通常每一次小块，基本思路是为要处理的项目穿件一个队列，然后使用定时器取出要处理的项目进行处理，接着在设置另一个定时期
 * 
 * 基本模式如下：
 * setTimeout(function(){
 * 		var item = array.shift();//删除数组中的第一个元素并返回第一个元素
 * 		process.call(context,item);//处理项目
 * 		//若还有条目，在设置另一个定时器
 * 		if(array.length > 0){
 *			setTimeout(arguments.callee,100);
 * 		}
 * 	},100);
	
 * @param {Object} array   要处理的项目数组
 * @param {Object} process	用于处理项目的函数
 * @param {Object} context	可选的运行该函数的环境
 * 函数内部用了之前描述过的基本的模式，通过call（）调用的process（）函数，这样可以设置一个合适的执行环境（如果必须）.
 * 定时器的时间间隔设置为了100ms，使得JavaScript进程有时间在处理一个项目的事件之间转入空闲。
 * 可以根据具体的需要更爱这个间隔大小，不过100ms在大多数情况下鲜果不错。
 * 
 * arrat.concat();无参数时是复制数组
 * 
 * 数组分块的重要性在于可以将多个项目的处理在执行队列上分开，在每个项目处理之后，给予其他的浏览器处理机会运行，这样就可以长时间运行脚本的错误
 */
function chunk(array,process,context){
	setTimeout(function(){
		var item = array.shift();//删除数组中的第一个元素并返回第一个元素
		process.call(context,item);//处理项目
		//若还有条目，在设置另一个定时器
		if(array.length > 0){
			setTimeout(arguments.callee,100);
		}
	},100);
}
//例子 
var data = [12,13,14,14,1,12,34,44,55,556,6,66];
function printValue(item){
	var div = document.getElementById("myDiv");
	div.innerHTML += item + "</br>";
}
chunk(data,printValue);
/**
 * 链式setTimeout()调用
 */
function setTimeoutMethed1(){
	setTimeout(function(){
		//处理中
		setTimeout(argments.callee,interval);
	},interval);
}
/**
 * 函数节流
 * 基本思想：某些代码不可以在没有间断的情况下连续重复执行。第一次调用函数，创建一个定时器，在制定的时间间隔之后运行代码。
 * 第二次调用该航速时，他会清除前一次的定时器并设置另一个。如果前一个定时器执行过了，这个操作就没有意义了。如果钱一个定时器尚未执行，其实就是将其替换为一个新的定时器。
 * 目的是只有在执行函数的请求停止了一段时间之后才执行。
 * 该模式的基本形式：
 * 	var processor = {
 * 		timeoutId : null,
 * 		//实际进行处理的方法
 * 		performProcessing:function(){
 * 			//实际执行的代码
 * 		},
 * 		//初始处理调用的方法
 * 		process : function(){
 * 			clearTimeout(this.timeoutId);
 * 			var that = this;
 * 			this.timeoutId = setTimeout(function(){
 * 				that.performProcessing();
 * 			},100)
 * 		}
 * 	}
 * 
 * 
 * 
 * @param {Object} method	要执行的函数
 * @param {Object} context	在那个作用域中执行
 */
function throttle(method,context){
	clearTimeout(method.tId);
	method.tId = setTimeout(function(){
		method.call(context);
	},100);
}
//节流在resize事件中是最常用的。如果基于改时间来改变页面布局的话，最好控制处理的频率，以确保浏览器不会在极短的事件内进行过多的计算
function resizeDiv(){
	var div = document.getElementById("myDiv");
	div.style.height = div.offsetWidth + "px";
}
window.οnresize=function(){
	throttle(resizeDiv);
}