/**
*高级定时器
*
* 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);
}