HTML5 - Putting JavaScript to Work: Web Workers(onmessage event, postMessage method)

Head First HTML5 Programming

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• Safari(Web browser)

Head First HTML5 Programming (Elisabeth Robson (著)、Eric Freeman (著)、O'Reilly Media)の Chapter 10.(Putting JavaScript to Work: Web Workers)、EXERCISE(No. 7213) を取り組んでみる。

EXERCISE(No. 7213)

コード(Emacs)

JavaScript

let btn0 = document.querySelector('#run0'),
    btn1 = document.querySelector('#clear0'),
    pre0 = document.querySelector('#output0'),
    p = (x) => pre0.textContent += x + '\n';

let quotes = [
    "I hope life isn't a joke, because I don't get it.",
    "There is a light at the end of every tunnel... just pray it's not a train!",
    "Do you believe in love at first sight or should I walk by again?"
],
    numWorkers = 3,
    workers = [];

for (let i = 0; i < numWorkers; i += 1) {
    let worker = new Worker('worker.js');
    
    worker.onmessage = (event) => {
        p(`${event.target} says ${event.data}`);
    };
    workers.push(worker);
}

let output = () => {
    for (let i = 0; i < numWorkers; i ++ 1) {
        workers[i].postMessage('ping');
    }
};

btn0.onclick = output;
btn1.onclick = () => pre0.textContent = '';

output();