html5 web workersサンプル

html5からマルチスレッドAPIも提供しています、これはWeb Workersです。これを利用して、画面側で動的に内容表示や大量計算など処理はよりより実現可能になります。

サンプル：
http://html5next.appspot.com/webworkers.html

ソース：
html:
<script type="text/javascript">
var worker = new Worker("webworkers.js");

function messageHandler(e) { 
 alert(e.data); 
}
function errorHandler(e) {
 alert(e.message);
}
function stopWorker() {
    worker.terminate();
}

$(function() {

 if (typeof(Worker) !== "undefined") 
 {
  document.getElementById("support").innerHTML = "おめでとうございます、あなたのブラウザーはHTML5 Web Workersをサポートしています。";

  worker.addEventListener("message", messageHandler, true);
  worker.addEventListener("error", errorHandler, true); 

     $("#btnTestWebWorker").click(function() {
         worker.postMessage("html5 leaner");
     });

     $("#btnStopWebWorker").click(function() {
      stopWorker();
     });
 }
 else
 {
  document.getElementById("support").innerHTML = "おめでとうございます、あなたのブラウザーはHTML5 Web Workersをサポートしていません。";
  $("#btnTestWebWorker").attr("disabled", "disabled");
 }
 
});
</script>

<div id="support"></div>
<button id="btnTestWebWorker">Web Workers 送信</button>
<button id="btnStopWebWorker">Web Workers ストップ</button>

webworkers.js:
function messageHandler(e) { 
 postMessage("worker says: こんにちは、" + e.data + " 。");
}

addEventListener("message", messageHandler, true);