2017년 1월 1일 일요일
worker
http://m.mkexdev.net/52
http://d.hatena.ne.jp/ushiboy/20101021/1287667594
javascriptはもともとシングルスレッドといい、時間がかかる処理の場合
その間、他のUI作業をスクリプト作業が完了するまで待機しないといけなかったが
Webworkerを使えば、複数のプログラムを平行して実行できる（マルチスレッド）
WebworkerはjsコードをUIスレッドと別途でバックグラウンドで実行できるため、
worker処理が行われる間ウェブページが固まることなく、UI作業を行うことができる
ワーカをサポートしないブラウザかを確認する必要がある
if(!!window.Worker){
alert("ブラウザがワーカをサポートしません")
}
terminate() ワーカを終了
onmessage メッセージ受信イベント
postMessage メッセージ送信イベント
onerror エラー発生時感知イベント
errプロパティ
・message
・filename
・lineno エラーが発生した時、エラー発生行を知ることができる
-----------------------------------------------
worker.html
-----------------------------------------------
...
<body>
<button onclick="callWorker()">callWorker</button>
<button onclick="stopWorker()">stopWorker</button>
<br>
<input type="text" id="toworker">
<div id="result"></div>
<script type="text/javascript">
var worker;
function callWorker() {
if (!!window.Worker) {
// workerがすでに存在した場合終了
if (worker){
worker.terminate();
}
// worker処理を定義したjsをパラメータでworker生成
worker = new Worker("./worker.js");
// workerからメッセージ受信
worker.onmessage = function(event) {
document.getElementById('result').innerHTML = event.data;
};
// ワーカーにパラメータ送信
worker.postMessage(document.getElementById('toworker').value);
} else {
alert("ブラウザがワーカをサポートしません")
}
}
function stopWorker() {
if (worker) {
worker.terminate();
}
}
</script>
</body>
-----------------------------------------------
worker.js
-----------------------------------------------
var total = 0;
onmessage = function(event){
for(var val=0; val < 50000000000000000000; val++){
total = total + val;
// workerから
postMessage(event.data + ' 中間結果:' + total);
}
postMessage(event.data + '結果' + total);
}
피드 구독하기:
댓글 (Atom)
댓글 없음:
댓글 쓰기