Question

JavaScript如何处理大量数据?

Answer 1

　将需要大量处理数据的过程分割成很多小段，然后通过JavaScript的计时器来分别执行，就可以防止浏览器假死。先看看怎么开始：
function ProcessArray(data,handler,callback){

　　ProcessArray()方法支持三个参数：
data:需要处理的数据
handler:处理每条数据的函数
callback:回调函数
　　然后定义一些变量：
var maxtime = 100;
var delay = 20;
var queue = data.concat();
　　maxtime表示每个处理进程的最大毫秒数。delay表示每个程序块之间的毫秒数。queue是源数据的复制，虽然不是在所有情景下都必要，但是我们是通过传递引用修改的，所以最好还是备份一下。
　　然后就可以使用setTimeout()方法来处理了：
setTimeout(function(){
var endtime = new Date() + maxtime;
do{
hanler(queue.shift());
}while(queue.length>0 && endtime > new Date());
　　首先，先计算endtime，这是程序处理的最大时间。do.while 循环用来处理每一个小块的数据，直到循环全部完成或者超时。
　　为什么使用do..while循环呢？
　　JavaScript支持while和do…while循环。不同之处在于do..while循环回至少执行一次。如果使用while循环，那么当开发者设置一个很小或者很低的endtime值的时候，那么处理就根本不会执行了。
　　最后，我们再决定是否需要处理其他的数据，如果需要，那么就再调用一次：
if (queue.length > 0) {
setTimeout(arguments.callee, delay);
}
else {
if (callback) callback();
}
}, delay);
}
　　这样回调函数会在每一个数据都处理结束的时候执行。我们可以通过ProcessArray()来测试一小组数据：
// process an individual data item
function Process(dataitem) {
console.log(dataitem);
}
// processing is complete
function Done() {
console.log("Done");
}
// test data
var data = [];
for (var i = 0; i < 500; i++) data[i] = i;
// process all items
ProcessArray(data, Process, Done);
　　这个方法在任何浏览器中都可以执行，不过HTML5提供了更好的办法，Rockux在以后的文章中会提到。