如何在JavaScript中处理大量数据

　　在之前的文章中，我们讲了浏览器对于JavaScript代码执行的限制和基于计时器的伪线程机制。这里，我们再看看如何在JavaScript中处理大量数据。

　　在几年之前，开发人员不会去考虑在服务端之外处理大量的数据。现在这种观念已经改变了，很多Ajax程序需要在客户端和服务器端传输大量的数据。此外，更新DOM节点的处理在浏览器端来看也是一个很耗时的工作。而且，需要对这些信息进行分析处理的时候也很可能导致程序无响应，浏览器抛出错误。

　　将需要大量处理数据的过程分割成很多小段，然后通过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在以后的文章中会提到。