在前台页面上处理大量数据的时候,我们不希望因为数据量过大,处理时间过长,导致UI交互出现卡顿,那这个时候就可以使用时间切片的方式,将一个计算任务进行拆分为一个个独立的小任务,让UI有时间继续响应用户的操作。
先上源代码:
8.31 虽然很努力的维护,但是还是出现了严重的BUG,这版修复。
7.25 修复num参数为1不能执行的错误。
7.24 发布。
/**
* 这是一个异步队列处理程序
* @param list {array} 这个必须是数组
* @param fn {function} 每元素处理的方法,fn默认会传入当前操作的元素以及元素的索引下标
* @param num {number} 单次处理数量
* @param scope {object} 作用域
* @param interval {number} 队列处理间隔时长(单位:毫秒)
*/
function asyncEach(list,fn,num,scope,interval){
if(!list || list.lengh == 0 || !fn ){
return;
}
var len = list.length,
num = num || 5,
scope = scope || this,
interval = interval || 1,
start = 0,
end = len > num ? start + num : len,
process = function (l,s,e){
for(var i = s;i < e;i++){
if(fn.call(scope,list[i],i)===false){
return;
}
}
if(e == len) return;
setTimeout(function(){
process(l,e,len - e > num ? e+num : len);
},interval);
};
process(list,start,end);
}