如何在JavaScript中處理大量資料

BKJIA推薦專題：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