JavaScriptでマルチスレッドと非同期を実行する別の方法
HTML5より前のJavaScriptでは、ページごとに1つのスレッドしか実行できませんでした。
非同期実行をシミュレートするためにいくつかのハックの方法がありました収量、setTimeout()、setInterval()、XMLHttpRequestまたはイベントハンドラを（と例については、この記事の最後を参照の収量とsetTimeout()）が。
しかし、HTML5では、ワーカースレッドを使用して関数の実行を並列化できるようになりました。こちらが使用例です。
実際のマルチスレッド
マルチスレッド：JavaScriptワーカースレッド
HTML5で導入されたWebワーカースレッド（参照：ブラウザーの互換性）
注：IE9以前のバージョンではサポートされていません。
これらのワーカースレッドは、ページのパフォーマンスに影響を与えずにバックグラウンドで実行されるJavaScriptスレッドです。Webワーカーの 詳細については、ドキュメントまたはこのチュートリアルをご覧ください。
以下は、MAX_VALUEまでカウントし、現在の計算値をページに表示する3つのWeb Workerスレッドの簡単な例です。
//As a worker normally take another JavaScript file to execute we convert the function in an URL: http://stackoverflow.com/a/16799132/2576706
function getScriptPath(foo){ return window.URL.createObjectURL(new Blob([foo.toString().match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1]],{type:'text/javascript'})); }
var MAX_VALUE = 10000;
/*
* Here are the workers
*/
//Worker 1
var worker1 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
//We add a listener to the worker to get the response and show it in the page
worker1.addEventListener('message', function(e) {
document.getElementById("result1").innerHTML = e.data;
}, false);
//Worker 2
var worker2 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker2.addEventListener('message', function(e) {
document.getElementById("result2").innerHTML = e.data;
}, false);
//Worker 3
var worker3 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker3.addEventListener('message', function(e) {
document.getElementById("result3").innerHTML = e.data;
}, false);
// Start and send data to our worker.
worker1.postMessage(MAX_VALUE);
worker2.postMessage(MAX_VALUE);
worker3.postMessage(MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
3つのスレッドが並行して実行され、現在の値をページに出力していることがわかります。それらは別々のスレッドでバックグラウンドで実行されるため、ページをフリーズしません。
マルチスレッド：複数のiframe
これを実現する別の方法は、複数のiframeを使用することです。それぞれがスレッドを実行します。URLによってiframeにいくつかのパラメーターを与えることができます。結果を取得して印刷するために、iframeは親と通信できます（iframeは同じドメインにある必要があります）。
この例はすべてのブラウザで機能するわけではありません。 iframeは通常、メインページと同じスレッド/プロセスで実行されます（ただし、FirefoxとChromiumでは処理が異なるようです）。
コードスニペットは複数のHTMLファイルをサポートしていないため、ここでは異なるコードを提供します。
index.html：
//The 3 iframes containing the code (take the thread id in param)
<iframe id="threadFrame1" src="thread.html?id=1"></iframe>
<iframe id="threadFrame2" src="thread.html?id=2"></iframe>
<iframe id="threadFrame3" src="thread.html?id=3"></iframe>
//Divs that shows the result
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<script>
//This function is called by each iframe
function threadResult(threadId, result) {
document.getElementById("result" + threadId).innerHTML = result;
}
</script>
thread.html：
//Get the parameters in the URL: http://stackoverflow.com/a/1099670/2576706
function getQueryParams(paramName) {
var qs = document.location.search.split('+').join(' ');
var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params[paramName];
}
//The thread code (get the id from the URL, we can pass other parameters as needed)
var MAX_VALUE = 100000;
(function thread() {
var threadId = getQueryParams('id');
for(var i=0; i<MAX_VALUE; i++){
parent.threadResult(threadId, i);
}
})();
マルチスレッドのシミュレーション
シングルスレッド：setTimeout（）でJavaScriptの同時実行性をエミュレートします
「素朴な」方法はsetTimeout()、次のように関数を順番に実行することです。
setTimeout(function(){ /* Some tasks */ }, 0);
setTimeout(function(){ /* Some tasks */ }, 0);
[...]
ただし、この方法は機能しません。各タスクが順番に実行されるためです。
次のように関数を再帰的に呼び出すことにより、非同期実行をシミュレートできます。
var MAX_VALUE = 10000;
function thread1(value, maxValue){
var me = this;
document.getElementById("result1").innerHTML = value;
value++;
//Continue execution
if(value<=maxValue)
setTimeout(function () { me.thread1(value, maxValue); }, 0);
}
function thread2(value, maxValue){
var me = this;
document.getElementById("result2").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread2(value, maxValue); }, 0);
}
function thread3(value, maxValue){
var me = this;
document.getElementById("result3").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread3(value, maxValue); }, 0);
}
thread1(0, MAX_VALUE);
thread2(0, MAX_VALUE);
thread3(0, MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
ご覧のとおり、この2番目のメソッドはメインスレッドを使用して関数を実行するため、非常に遅く、ブラウザをフリーズさせます。
シングルスレッド：JavaScriptの同時実行性を歩留まりでエミュレート
Yieldは ECMAScript 6の新機能で、FirefoxとChromeの最も古いバージョンでのみ機能します（Chromeでは、 chrome：// flags /＃enable-javascript-harmonyに表示される試験運用版JavaScriptを有効にする必要があります）。
yieldキーワードを指定すると、ジェネレーター関数の実行が一時停止し、yieldキーワードに続く式の値がジェネレーターの呼び出し元に返されます。これは、ジェネレーターベースのバージョンのreturnキーワードと考えることができます。
ジェネレータを使用すると、関数の実行を一時停止して、後で再開できます。ジェネレーターを使用して、トランポリンと呼ばれる手法で関数をスケジュールできます。
次に例を示します。
var MAX_VALUE = 10000;
Scheduler = {
_tasks: [],
add: function(func){
this._tasks.push(func);
},
start: function(){
var tasks = this._tasks;
var length = tasks.length;
while(length>0){
for(var i=0; i<length; i++){
var res = tasks[i].next();
if(res.done){
tasks.splice(i, 1);
length--;
i--;
}
}
}
}
}
function* updateUI(threadID, maxValue) {
var value = 0;
while(value<=maxValue){
yield document.getElementById("result" + threadID).innerHTML = value;
value++;
}
}
Scheduler.add(updateUI(1, MAX_VALUE));
Scheduler.add(updateUI(2, MAX_VALUE));
Scheduler.add(updateUI(3, MAX_VALUE));
Scheduler.start()
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>