技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 如何在JavaScript中处理大量数据

如何在JavaScript中处理大量数据

浏览:2552次  出处信息

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

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

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

1
function ProcessArray(data,handler,callback){

    ProcessArray()方法支持三个参数:

  • data:需要处理的数据
  • handler:处理每条数据的函数
  • callback:回调函数
  •     然后定义一些变量:

    1
    2
    3
    
    var maxtime = 100;
    var delay = 20;
    var queue = data.concat();

        maxtime表示每个处理进程的最大毫秒数。delay表示每个程序块之间的毫秒数。queue是源数据的复制,虽然不是在所有情景下都必要,但是我们是通过传递引用修改的,所以最好还是备份一下。

        然后就可以使用setTimeout()方法来处理了:

    1
    2
    3
    4
    5
    
    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值的时候,那么处理就根本不会执行了。

        最后,我们再决定是否需要处理其他的数据,如果需要,那么就再调用一次:

    1
    2
    3
    4
    5
    6
    7
    8
    
        if (queue.length > 0) {
          setTimeout(arguments.callee, delay);
        }
        else {
          if (callback) callback();
        }
      }, delay);
    }

        这样回调函数会在每一个数据都处理结束的时候执行。我们可以通过ProcessArray()来测试一小组数据:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    // 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在以后的文章中会提到。

    建议继续学习:

    1. 腾讯-1亿个数据取前1万大的整数-题解答    (阅读:9042)
    2. MySQL”海量数据”查询性能分析    (阅读:2636)
    3. 海量数据处理专题(六)――双层桶划分    (阅读:2574)
    QQ技术交流群:445447336,欢迎加入!
    扫一扫订阅我的微信号:IT技术博客大学习
    © 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

    京ICP备15002552号-1