小試JavaScript多線程第1/2頁

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

法寶就是Concurrent.Thread這個傢伙，其實是一個js庫,你可以從網站下載原始碼.如何使用呢?
很簡單
Concurrent.Thread.create(f, a1, a2, ...) f為你要調用的函數，a1,a2為該函數的參數，這樣建立了一個線程，你可以同時建立多個，他們會同時去執行，這個庫同時提供了很多的方法，類似其它語言裡的Thread使用方法,如Concurrent.Thread.stop();等。具體去網站去瞭解。複製代碼代碼如下:<html>
<body>
<script type="text/javascript" src="Concurrent.Thread.Compiler.js"></script>
<script type="text/javascript">
function hello ( ) {
document.body.innerHTML += "H";
document.body.innerHTML += "e";
document.body.innerHTML += "l";
document.body.innerHTML += "l";
document.body.innerHTML += "o";
document.body.innerHTML += ",";
document.body.innerHTML += " ";
document.body.innerHTML += "w";
document.body.innerHTML += "o";
document.body.innerHTML += "r";
document.body.innerHTML += "l";
document.body.innerHTML += "d";
document.body.innerHTML += "!";
}
Concurrent.Thread.create(hello);
</script>
</body>
</html>

作者 Daisuke Maki譯者張凱峰
雖然有越來越多的網站在應用AJAX技術進行開發，但是構建一個複雜的AJAX應用仍然是一個難題。造成這些困難的主要原因是什麼呢？是與伺服器的非同步通訊問題？還是GUI程式設計問題呢？通常這兩項工作都是由傳統型程式來完成的，那究竟為何開發一個可以實現同樣功能的AJAX應用就這麼困難呢？
AJAX 開發中的難題
讓我們通過一個簡單的例子來認識這個問題。假設你要建立一個樹形結構的公告欄系統(BBS)，它可以根據使用者請求與伺服器進行互動，動態載入每篇文章的資訊，而不是一次性從伺服器載入所有文章資訊。每篇文章有四個相關屬性：系統中可以作為唯一標識的ID、發貼人姓名、文章內容以及包含其所有子文章 ID的數組資訊。首先假定有一個名為getArticle()的函數可以載入一篇文章資訊。該函數接收的參數是要載入文章的ID，通過它可從伺服器擷取文章資訊。它返回的對象包含與文章相關的四條屬性：id，name，content和children。常式如下：
function ( id ) {
var a = getArticle(id);
document.writeln(a.name + "
" + a.content);
}
然而你也許會注意到，重複用同一個文章ID調用此函數，需要與伺服器之間進行反覆且無益的通訊。想要解決這個問題，可以考慮使用函數 getArticleWithCache()，它相當於一個帶有緩衝能力的getArticle()。在這個例子中，getArticle()返回的資料只是作為一個全域變數被儲存下來：
var cache = {};
function getArticleWithCache ( id ) {
if ( !cache[id] ) {
cache[id] = getArticle(id);
}
return cache[id];
}
現在已將讀入的文章緩衝起來，讓我們再來考慮一下函數backgroundLoad()，它應用我們上面提到的緩衝機制載入所有文章資訊。其用途是，當讀者在閱讀某篇文章時，從後台預先載入它所有子文章。因為文章資料是樹狀結構的，所以很容易寫一個遞迴的演算法來遍曆樹並且載入所有的文章：
function backgroundLoad ( ids ) {
for ( var i=0; i < ids.length; i++ ) {
var a = getArticleWithCache(ids[i]);
backgroundLoad(a.children);
}
}
backgroundLoad ()函數接收一個ID數組作為參數，然後通過每個ID調用前面定義過的getArticldWithCache()方法，這樣就把每個ID對應的文章緩衝起來。之後再通過已載入文章的子文章ID數組遞迴調用backgroundLoad()方法，如此整個文章樹就被緩衝起來。
到目前為止，一切似乎看起來都很完美。然而，只要你有過開發AJAX應用的經驗，你就應該知曉這種幼稚的實現方法根本不會成功，這個例子成立的基礎是預設 getArticle()用的是同步通訊。可是，作為一條基本原則，JavaScript要求在與伺服器進行互動時要用非同步通訊，因為它是單線程的。就簡單性而言，把每一件事情（包括GUI事件和渲染）都放在一個線程裡來處理是一個很好的程式模型，因為這樣就無需再考慮線程同步這些複雜問題。另一方面，他也暴露了應用開發中的一個嚴重問題，單線程環境看起來對使用者請求響應迅速，但是當線程忙於處理其它事情時(比如說調用getArticle())，就不能對使用者的滑鼠點擊和鍵盤操作做出響應。
如果在這個單線程環境裡進行同步通訊會發生什麼事情呢？同步通訊會中斷瀏覽器的執行直至獲得通訊結果。在等待通訊結果的過程中，由於伺服器的調用還沒有完成，線程會停止回應使用者並保持鎖定狀態直到調用返回。因為這個原因，當瀏覽器在等待伺服器響應時它不能對使用者行為作出響應，所以看起來像是凍結了。當執行 getArticleWithCache()和backgroundLoad()會有同樣的問題，因為它們都是基於getArticle()函數的。由於下載所有的文章可能會耗費很可觀的一段時間，因此對於backgroundLoad()函數來說，瀏覽器在此段時間內的凍結就是一個很嚴重的問題——既然瀏覽器都已經凍結，當使用者正在閱讀文章時就不可能首先去執行後台預先載入資料，如果這樣做連當前的文章都沒辦法讀。
如上所述，既然同步通訊在使用中會造成如此嚴重的問題，JavaScript就把非同步通訊作為一條基本原則。因此，我們可以基於非同步通訊改寫上面的程式。 JavaScript要求以一種事件驅動的程式設計方式來寫非同步通訊程式。在很多場合中，你都必須指定一個回調程式，一旦收到通訊響應，這個函數就會被調用。例如，上面定義的getArticleWithCache()可以寫成這樣：
var cache = {};
function getArticleWithCache ( id, callback ) {
if ( !cache[id] ) {
callback(cache[id]);
} else {
getArticle(id, function( a ){
cache[id] = a;
callback(a);
});
}
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More