【原】javascript【数组分块】技术，从理解到熟练使用！

前面的话

javascript是运行于单线程的环境中的，定时器仅仅只是计划代码在未来的某个时间执行。

为什么要使用数组分块?

我们经常见到这样的一段代码：

for(var i=0,len=data.length;i<len;i++){
    //执行的代码
}

data.length不大还好，当length达到成百上千甚至更大的时候，

每次循环如果要50ms，那完成全部循环用时将是很恐怖的！

前面说了javascript是运行于单线程的环境中的，这个长时间的循环就会造成后面代码的阻塞，给用户带来很不好的体验。

这时候将数组分块执行（异步来处理）将很有必要！

两个前提：

该循环是否必须同步完成？

数据是否必须按顺序完成？

如果答案都是 ‘’否‘’，请继续往下看

基本思路

要为处理的项目创建一个队列，然后使用定时器取出下一个要处理的项目进行处理，接着在设置另一个定时器。

基本的模式如下：

setTimeout(function(){

//取出下一个条目并处理
var item=array.shift();
process(item);

//若还有条目，再设置另一个定时器
if(array.length>0){
setTimeout(arguments.callee,100);
}
},100);

封装成一个函数，方便以后使用：

function chunk(array,process,context){
    setTimeout(function(){
        var item=array.shift();
        process.call(context.item);
        if(array.length>0){
            setTimeout(arguments.callee,100);
        }
    },100);
}

chunk()方法接受三个参数：要处理的项目的数组，用于处理项目的函数，以及可选的运行该函数的环境；

定时器的时间间隔设置为了100ms，你也可以根据自己的需求更改。不过100ms在大多数情况下效果不错。

运用

var data=[12,55,336,541,2365,22,445,226,44];
function printValue(item){
    var div=document.getElementById("myDiv");
    div.innerHTML+=item+"<br>";
}
chunk(data,printValue);

如果你想保持原数组不变，则应该将数组克隆传递给chunk()，例：

chunk(data.cancat(),printValue);

结语

数组分块中重要性在于它可以将多个项目的处理在执行队列上分开，在每个项目处理之后，给予其他的浏览器处理机会运行，这样就可能避免长时间运行脚本的错误。

转载请注明出处！