如何在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);

这个方法在任何浏览器中都可以执行，不过HTML 5提供了更好的办法，可参考专题：HTML 5 下一代Web开发标准详解

原文链接：http://rockux.com

网页名称：如何在JavaScript中处理大量数据
标题来源：http://www.shufengxianlan.com/qtweb/news14/500064.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容