如何在JavaScript中处理大量数据
在之前的文章中,我们讲了浏览器对于JavaScript代码执行的限制和基于计时器的伪线程机制。这里,我们再看看如何在JavaScript中处理大量数据。
在几年之前,开发人员不会去考虑在服务端之外处理大量的数据。现在这种观念已经改变了,很多Ajax程序需要在客户端和服务器端传输大量的数据。此外,更新DOM节点的处理在浏览器端来看也是一个很耗时的工作。而且,需要对这些信息进行分析处理的时候也很可能导致程序无响应,浏览器抛出错误。
将需要大量处理数据的过程分割成很多小段,然后通过JavaScript的计时器来分别执行,就可以防止浏览器假死。先看看怎么开始:
1 |
function ProcessArray(data,handler,callback){ |
ProcessArray()方法支持三个参数:
然后定义一些变量:
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在以后的文章中会提到。
建议继续学习:
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:RockUX 来源: RockUX | WEB、前端、JavaScript、PHP
- 标签: 海量数据
- 发布时间:2011-03-21 00:07:17
- [67] Oracle MTS模式下 进程地址与会话信
- [65] 如何拿下简短的域名
- [65] Go Reflect 性能
- [61] android 开发入门
- [60] 【社会化设计】自我(self)部分――欢迎区
- [59] 图书馆的世界纪录
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [54] 视觉调整-设计师 vs. 逻辑
- [48] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 界面设计速成