Worker - 素人がプログラミングを勉強していたブログ

Workerに置いたWorkerの使用例について。

<!doctype html> 
<html> 
  <head> 
    <title>Worker</title> 
    <style> 
    pre {
      white-space: pre-wrap;
    }
    </style> 
    <script>window.onload = function () {
      var view = document.getElementById("view");
      var worker = new Worker("pi.js");
      worker.onmessage = function (ev) {
        view.textContent = Number(ev.data).toFixed(20);
      };
    };</script> 
  </head> 
  <body> 
    <pre id="view"></pre> 
  </body> 
</html>

まず、new Worker("script-url.js")でthreadで動かすスクリプトファイルのURLを指定し、Workerのインスタンスでmessageイベントをlistenするだけ。Workerとのやり取りは全てmessageイベントを経由して行う。workerにmessageイベントを投げるのはWorker#postMessageで、文字列のみ渡すことができる。逆にworkerから本スレッドにmessageイベントを投げるのは、Workerスレッド内のグローバル関数postMessage。

var result = 0;
for (var i = 1;; i += 4) {
  postMessage(result * 4);
  result += 1/i - 1/(i + 2);
}

setTimeoutを挟んでいないがUIをブロックしないというのが利点。

worker使っていたとしても、無限ループはさすがに重くなるので、この場合はsetTimeoutを挟んだりする必要があるようだ。sleepが欲しい。ちなみに、workerを使わないようにしたコードは下記で、worker使うより短くなった。

(function fun(result, i) {
  view.textContent = result * 4;
  setTimeout(function () {
    fun(result + 1/i - 1/(i + 2), i + 4);
  }, 0);
})(0, 1);