さて、今回はHTML4までは出来なかった、マルチスレッドプログラミングをする方法をご紹介します。
わざわざjavascriptでマルチスレッドプログラミングをする理由ですが、
今までは高負荷な処理をjavascriptで行うとブラウザが固まったりしましたが、
HTML5から導入された機能を使えば、バックグラウンドで処理を行いブラウザが固まることなく
快適なネット生活を送ることが可能となりました。
ということで、あえて、待機状態のある状況を作ってみます。
以下がソースです。
<head>
<script type="text/javascript">
// テキストエリアに指定された秒数待つ。
function sleep(){
var sec = document.getElementById("num").value
var start = new Date;
while (1) {
var cur = new Date;
if (sec * 1000 <= cur.getTime() - start.getTime())
{
break;
}
}
alert(sec + "秒まったよ");
}
</script>
</head>
<body>
秒数:<input type="text" id="num"><button onclick="sleep()">ｽﾘｰﾌﾟ</button>
</body>
テキストエリアに指定された秒数分待機状態が入った後、alertで何秒待ったかを表示する単純なロジックです。buttonを押すと指定秒数ブラウザが固まり、何もすることができなくなったと思います。
ということで今迄はやきもきしながら結果をまたなくてはなりませんでした。
しかし、HTML5から導入された機能『Web Workers』を使用すれば固まることがなく動作することが可能です。
以下がソースとなります。
main.html
<head>
<script type="text/javascript">
// インスタンスの生成
var worker = new Worker("http://ほにゃらら/worker.js");
// 結果返却後処理
worker.onmessage = function(event) {
alert(event.data + "秒まったよ");
};
// post送信
function post() {
worker.postMessage(document.getElementById("num").value);
}
</script>
</head>
<body>
秒数:<input type="text" id="num"><button onclick="post()">ｽﾘｰﾌﾟ</button>
</body>
worker.js
// メッセージの受信
onmessage = function(event) {
sleep(event.data);
postMessage(event.data);
}
function sleep(sec){
var start = new Date;
while (1) {
var cur = new Date;
if (sec * 1000 <= cur.getTime() - start.getTime())
{
break;
}
}
}
ということで、バックグラウンドで処理を行うjsでWoekerオブジェクトを作成し、postで指定されたjsにデータの送信を行い、jsの中で受け取った値をWokerオブジェクト
のonmessageイベントで取得し、alertで値を表示するというような処理を行なっています。
これでバックグランドで処理を行なっているので、ブラウザが固まることなく結果が帰って来たと思います。
HTML5が台頭したことにより、リッチな処理を行わなければならない事が増えてきたと思います。
そんな時には、是非WebWorkerを使用してブラウザが固まることを回避してみてください。
0 件のコメント:
コメントを投稿