回覆列表
  • 1 # 78號碼頭

     將需要大量處理資料的過程分割成很多小段,然後透過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 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提供了更好的辦法,Rockux在以後的文章中會提到。

  • 2 # 慎談奧秘

    摘要:這裡,我們看看如何瀏覽器對於JavaScript中處理大量資料。

      在之前的文章中,我們講了瀏覽器對於JavaScript程式碼執行的限制和基於計時器的偽執行緒機制。這裡,我們再看看如何在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 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提供了更好的辦法,Rockux在以後的文章中會提到。

    -----------河南新華

  • 中秋節和大豐收的關聯?
  • js遍歷json物件資料?