建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

JavaScript中如何处理大量数据

时间:2011-03-21 14:49来源: 作者: 点击:
以前我们编写的程序可能不会去考虑在服务端之外处理大量的数据。可是现在这种观念已经改变了,很多Ajax程序需要在客户端和服务器端传输大量的数据。此外,更新DOM节点的处理在浏览器端来看也是一个很耗时的工作。而且,需要对这些信息进行分析处理的时候也很可能导致程序无响

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

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

1 function ProcessArray(data,handler,callback){
ProcessArray()方法支持三个参数:

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


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

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

1 setTimeout(function(){2      var endtime = new Date()  + maxtime;3      do{4           hanler(queue.shift());5      }while(queue.length>0 && endtime > new Date());

首先,先计算endtime,这是程序处理的最大时间。do.while 循环用来处理每一个小块的数据,直到循环全部完成或者超时。

为什么使用do..while循环呢?
JavaScript支持while和do…while循环。不同之处在于do..while循环回至少执行一次。如果使用while循环,那么当开发者设置一个很小或者很低的endtime值的时候,那么处理就根本不会执行了。

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


1     if (queue.length > 0) {2       setTimeout(arguments.callee, delay);3     }4     else {5       if (callback) callback();6     }7   }, delay);8 }
这样回调函数会在每一个数据都处理结束的时候执行。我们可以通过ProcessArray()来测试一小组数据:


// process an individual data itemfunction Process(dataitem) {  console.log(dataitem);}// processing is completefunction Done() {  console.log("Done");}// test datavar data = [];for (var i = 0; i < 500; i++) data[i] = i;// process all itemsProcessArray(data, Process, Done);
这个方法在任何浏览器中都可以执行,不过HTML5提供了更好的办法。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片