詳解JavaScript之分解任務

作者：神秘唯一 2011-06-16 16:20:32

我們都知道，復雜的任務分解成一系列的子任務之后，就變得不是很復雜了。javascript中也存在這種任務分解，本文詳細的介紹JavaScript中的分解任務，希望對你有幫助，一起來看。

下面來看，JavaScript中分解任務，供參考。

我們通常將一個任務分解成一系列子任務。如果一個函數運行時間太長，那么查看它是否可以分解成一系列能夠短時間完成的較小的函數。可將一行代碼簡單地看作一個原子任務，多行代碼組合在一起構成一個獨立任務。某些函數可基于函數調用進行拆分。例如：

function saveDocument(id){  
openDocument(id)  
writeText(id);  
closeDocument(id);  
updateUI(id);  
}

如果函數運行時間太長，它可以拆分成一系列更小的步驟，把獨立方法放在定時器中調用。你可以將每個函數都放入一個數組，然后使用前一節中提到的數組處理模式：

function saveDocument(id){  
var tasks = [openDocument, writeText, closeDocument, updateUI];  
setTimeout(function(){  
var task = tasks.shift();  
task(id);  
if (tasks.length > 0){  
setTimeout(arguments.callee, 25);  
}  
}, 25);  
}

這個版本將每個方法放入任務數組，然后在每個定時器中調用一個方法。從根本上說，現在它成為數組處理模式，只有一點不同：處理函數就包含在數組項中。正如前面一節所討論的，此模式也可封裝重用：

function multistep(steps, args, callback){  
var tasks = steps.concat();  
setTimeout(function(){  
var task = tasks.shift();  
task.apply(null, args || []);  
if (tasks.length > 0){  
setTimeout(arguments.callee, 25);  
} else {  
callback();  
}  
}, 25);  
}

multistep()函數接收三個參數：用于執行的函數數組，為每個函數提供參數的參數數組，當處理結束時調用的回調函數。函數用法如下：

function saveDocument(id){  
var tasks = [openDocument, writeText, closeDocument, updateUI];  
multistep(tasks, [id], function(){  
alert("Save completed!");  
});  
}

注意傳給multistep()的第二個參數必須是數組，它創建時只包含一個id。正如數組處理那樣，使用此函數的前提條件是：任務可以異步處理而不影響用戶體驗或導致依賴代碼出錯。

（一）限時運行代碼

有時每次只執行一個任務效率不高。考慮這樣一種情況：處理一個擁有1'000個項的數組，每處理一個項需要1毫秒。如果每個定時器中處理一個項，在兩次處理之間間隔25毫秒，那么處理此數組的總時間是(25 + 1) × 1'000 = 26'000 秒，也就是26 秒。如果每批處理50個，每批之間間隔25毫秒會怎么樣呢？整個處理過程變成(1'000 / 50) × 25 + 1'000 = 1'500毫秒，也就是1.5秒，而且用戶也不會察覺界面阻塞，因為最長的腳本運行只持續了50毫秒。通常批量處理比每次處理一個更快。

如果你記住JavaScript可連續運行的最大時間是100毫秒，那么你可以優化先前的模式。我的建議是將這個數字削減一半，不要讓任何JavaScript代碼持續運行超過50毫秒，只是為了確保代碼永遠不會影響用戶體驗。

可通過原生的Date 對象跟蹤代碼的運行時間。這是大多數JavaScript分析工具所采用的工作方式：

var start = +new Date(),  
stop;  
someLongProcess();  
stop = +new Date();  
if(stop-start < 50){  
alert("Just about right.");  
} else {  
alert("Taking too long.");  
}

由于每個新創建的Data 對象以當前系統時間初始化，你可以周期性地創建新Data對象并比較它們的值，以獲取代碼運行時間。加號（+）將Data 對象轉換為一個數字，在后續的數學運算中就不必再轉換了。這一技術也可用于優化以前的定時器模板。
processArray()方法通過一個時間檢測機制，可在每個定時器中執行多次處理：

function timedProcessArray(items, process, callback){  
var todo = items.concat();  
setTimeout(function(){  
var start = +new Date();  
do {  
process(todo.shift());  
} while (todo.length > 0 && (+new Date() – start < 50));  
if (todo.length > 0){  
setTimeout(arguments.callee, 25);  
} else {  
callback(items);  
}  
}, 25);  
}

此函數中添加了一個do-while循環，它在每個數組項處理之后檢測時間。定時器函數運行時數組中存放了至少一個項，所以后測試循環比前測試更合理。在Firefox 3中，如果process()是一個空函數，處理一個1'000個項的數組需要38 – 34毫秒；原始的processArray()函數處理同一個數組需要超過25'000毫秒。這就是定時任務的作用，避免將任務分解成過于碎小的片斷。

（二）定時器與性能

定時器使你的JavaScript代碼整體性能表現出巨大差異，但過度使用它們會對性能產生負面影響。使用定時器序列，同一時間只有一個定時器存在，只有當這個定時器結束時才創建一個新的定時器。以這種方式使用定時器不會帶來性能問題。

當多個重復的定時器被同時創建會產生性能問題。因為只有一個UI線程，所有定時器競爭運行時間。Google Mobile的Neil Thomas 將此問題作為測量性能的方法進行研究，針對iPhone和Android上運行的移動Gmail程序。

Thomas發現低頻率的重復定時器——間隔在1 秒或1 秒以上——幾乎不影響整個網頁應用的響應。這種情況下定時器延遲遠超過使UI 線程產生瓶頸的值，因此可安全地重復使用。當多個重復定時器使用更高的頻率（間隔在100到200毫秒之間），Thomas發現移動Gmail程序明顯變慢，反應較差。

Thomas研究的言外之意是，要在你的網頁應用中限制高頻率重復定時器的數量。同時，Thomas建議創建一個單獨的重復定時器，每次執行多個操作。

原文地址： http://www.yiiyaa.net/1223

【編輯推薦】

JavaScript重構模塊劃分和命名空間
JavaScript初學者必須注意的七個細節
Javascript中的函數聲明和函數表達式
在服務端合并和壓縮JavaScript和CSS文件
學習Javascript閉包（Closure）

責任編輯：于鐵來源： yiiyaa.net

JavaScript 分解任務