気まぐれメモ: 外部ファイルを使わない埋込式のWorker (Web Workers API)

１．ワーカーの処理を1つの関数内で記述する。
２．関数の中身を文字列にする。
３．文字列→Blob(text/javascript)→URLに変換。
４．Workerを生成。

<body>
<div>
    <button id="runWorker">Start</button>
</div>
<script>
function defTickWorker() {
    let interval = 1000;
    let intervalID = null;
    self.addEventListener('message', (event) => {
        if(event.data.interval) {
            interval = event.data.interval;
        }

        if(event.data.id == 'Start') {
            intervalID = setInterval(() => {
                postMessage({'id': 'tick'});
            }, interval);
        }
        else if(event.data.id == 'Stop') {
            clearInterval(intervalID);
            intervalID = null;
        }
    });
}
const source = defTickWorker.toString().match(/{.*}/s);
const blob = new Blob([source], {type: 'text/javascript'});
const tickWorker = new Worker(URL.createObjectURL(blob));
tickWorker.addEventListener('message', (event) => {
    console.log("message: " + event.data.id);
});
tickWorker.postMessage({'interval': 100});

const runButton = document.getElementById('runWorker');
runButton.addEventListener('click', (event) => {
    tickWorker.postMessage({'id': event.target.innerText});
    event.target.innerText =
        event.target.innerText == 'Start' ? 'Stop' : 'Start';
});
</script>
</body>