More Related Content Similar to Try Webworkers Similar to Try Webworkers (20) Try Webworkers1. Web Workersを
使おう
2010/01/23
mollifier
http://d.hatena.ne.jp/mollifier/
2. Web Workers とは
Web Workers の使い方
活用できる場面
3. Web Workers とは
Web Workers の使い方
活用できる場面
7. function setText(elem, text) {
if (! elem.firstChild) {
elem.appendChild(document.createTextNode(""));
}
elem.firstChild.data = text;
}
function run() {
var num =
parseInt(document.getElementById("num").value, 10);
var result = 0;
for (var i = 0; i <= num; i++) {
result += i;
}
// 計算完了
var retElem = document.getElementById("result");
setText(retElem, result.toString());
}
12. Web Workers とは
Web Workers の使
い方
活用できる場面
17. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="application/javascript"
src="main.js"></script>
</head>
<body>
<h1>計算したい</h1>
<p>
1 から <input type="text" id="num" value="10"> までの合計
</p>
<button id="run">計算!</button>
<p id="result"></p>
<p><a href="../index.html">index</a></p>
</body>
</html>
21. main.js worker.js
ブラウザ本体側 バックグラウンド処理
計算してくれ !
計算する
計算したよ !
表示する
23. (function() {
function init() {
function run() {
var num = parseInt(document.getElementById("num").value, 10);
// 計算を行うワーカを生成
var worker = new Worker("worker.js");
// ワーカから結果を受け取る
worker.onmessage = function(event) {
var retElem = document.getElementById("result");
if (! retElem.firstChild) {
retElem.appendChild(document.createTextNode(""));
}
retElem.firstChild.data = event.data;
};
// ワーカーに計算させる
worker.postMessage(num);
}
document.getElementById("run").
addEventListener('click', run, false);
}
window.addEventListener('load', init, false);
})();
29. // バックグラウンド処理を登録する
onmessage = function(event) {
// main.js の
// worker.postMessage(num);
// が呼び出されたとき、
// ワーカー側では
// この関数が実行される
// ... 次のページに続く
};
30. onmessage = function(event) {
// event.data に main.js 側で
// 指定した数字が入っている
var num = event.data;
var result = 0;
for (var i = 0;i <= num; i++) {
result += i;
}
// 結果を main.js 側に通知する
postMessage(result);
};
31. main.js worker.js
new Worker() (1) worker が作られる
(2) postMessage
(3) onmessage
(4) postMessage
(5) onmessage
32. Web Workers とは
Web Workers の使い方
活用できる場面