武汉web培训
达内武汉中心

15827352908

热门课程

前端开发人员如何处理大量的数据

  • 时间:2018-04-25 16:32
  • 发布:武汉web前端培训机构
  • 来源:互联网

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

武汉web前端培训

将需要大量处理数据的过程分割成很多小段,然后通过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);

本篇文章是由武汉web前端培训机构为您呈现,希望给您带来更多更好的文章,喜欢的朋友们可以添加微信公众号。

武汉web前端培训

马上预约七天免费试听课

姓名:

电话:

上一篇:整体布局一定要用div做table吗
下一篇:简述IE条件注释

这么棒的前端交互层你还不知道吗

想要学web前端之前你要这么做...

有关web前端答疑解惑之三

前端和后端有什么不一样

选择城市和中心
贵州省

广西省

海南省

有位老师想和您聊一聊