JavaScriptで大量のデータを処理する方法

以前の論文では,JavaScriptコードに対するブラウザの実行制限とタイマベースの擬似スレッドメカニズムについて述べた.ここでは、JavaScriptで大量のデータを処理する方法を見てみましょう.
数年前までは、開発者はサービス側以外で大量のデータを処理することを考慮しませんでした.このような考え方は変わりました.多くのAjaxプログラムは、クライアントとサーバ側で大量のデータを転送する必要があります.また,DOMノードの更新処理はブラウザ側から見ても時間のかかる作業である.また,これらの情報を解析処理する必要がある場合にも,プログラムが応答せず,ブラウザがエラーを投げ出す可能性が高い.
データを大量に処理する必要があるプロセスを多くのセグメントに分割し,JavaScriptのタイマーで別々に実行することで,ブラウザの偽死を防ぐことができる.まず、どのように始めるかを見てみましょう.

  


   function ProcessArray(data,handler,callback){

  

ProcessArray()メソッドは、次の3つのパラメータをサポートします.

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ループは少なくとも1回実行されます.whileループを使用すると、開発者が小さなendtime値または低い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はより良い方法を提供しています.Rockuxは後述します.