再投稿_バックグラウンドで setInterval

質問

すみません、誤って同様の質問を締め切ってしまったので再投稿させていただきます。

https://gist.github.com/kawaz/72f61d8389fed0e9d4e7dc9eb01b39c8
setIntervalはブラウザのタブがバックグラウンドで動作しないとのことで動作させるためのサンプルコードが
ないかと調べていたところ上記サイトを見つけました。
上記サイトでは下記のようなコードが記述されていたのですやっていることがわからなかったのですが
どなたか解説して頂けないでしょうか。
大きく下記2点が不明です。

1. const code = `self.addEventListener('message', msg=>{setInterval(()=>self.postMessage(null), msg.data)})`
の部分
setIntervalの第一引数に関数定義「()=>self.postMessage(null)」を渡し、第二引数にmsg.data を渡しています。
これはmessageイベントが発生したらsetIntervalで定期的にpostMessageでWorkerにメッセージ(msg.data)を送信する
ということなのでしょうか？
そしてその処理をWorkerに渡して処理をバックグラウンドで動かすということをやっているのでしょうか？
そもそも'message'イベント(メッセージを受信？どこから？)っていつ起こるものなのでしょうか。

2. superIntervalに渡している引数
(使い方)にあるsuperInterval()に渡している引数がよくわからないです。
　第二引数で500を渡していながらsuperIntervalの第二引数はinterval=1000となってるし、
その他の引数についても何のためにどういう使い方をしているかわかりますでしょうか？

(superInterval.js)
const superInterval = (cb, interval=1000, ...args) => {
try {
const code = `self.addEventListener('message', msg=>{setInterval(()=>self.postMessage(null), msg.data)})`
const w = new Worker(`data:text/javascript;base64,${btoa(code)}`)
w.onmessage = () => cb(...args)
w.postMessage(interval)
return {stop:()=>w.terminate()}
} catch(_){
// 実装の問題またはCSPによる拒否などで Worker が使えなければ普通の setInterval を使う
const id = setInterval(cb, interval, ...args)
return {stop:()=>clearInterval(id)}
}
}

(使い方)
{
const log = (...args) => console.log(...args)
const {stop} = superInterval(log, 500, 1, {a:2}, [3])
setTimeout(stop, 3000)
}

回答No.1

なんでも 答える君（@yuki11300615） · ベストアンサー

const code = self.addEventListener('message', msg=>{setInterval(()=>self.postMessage(null), msg.data)})
この部分は、Web Worker に対して、message イベントを監視するリスナーを登録しています。Worker は、JavaScript の実行コンテキストを分離したバックグラウンドのタスクランナーであり、Web Worker から postMessage() を呼ぶことでメッセージを送信することができます。ここでは、setInterval() 関数を使用して、定期的に null 値を Worker に送信しています。こうすることで、Worker 内で何らかのタスクを定期的に実行することができます。
superInterval() 関数に渡す引数は、setInterval() 関数に渡す引数と同じように扱われます。つまり、最初の引数には定期的に実行したい関数を渡し、2番目以降の引数には、その関数に渡す引数を指定します。superInterval() 関数は、第2引数で渡された interval 値を Worker に送信し、Worker 内で定期的にメッセージを送信することで、指定された間隔で関数を実行します。また、...args を使用して、可変長引数を渡すことができます。例えば、この場合は、cb 関数に、1, {a:2}, [3] の3つの引数を渡すことになります。superInterval() 関数は、try-catch 文で、Worker が使えない場合には通常の setInterval() 関数を使うようにしています。最後に、stop メソッドを返しています。stop メソッドを呼び出すことで、superInterval() 関数によって作成されたインターバルを停止することができます。

補足

ご回答ありがとうございます。
以下の理解であっていますでしょうか。

1. w.postMessage(interval)とすることでWeb Workerにメッセージ(interval)を送信。
2. 登録したイベントリスナが発動　→　定期的に null 値を Web Worker に送信
3. 2.でWeb Workerに送信されたら w.onmessage = () => cb(...args) が発動して可変引数 ...args をコンソールに表示

また、疑問点が2つほどあります
①. 上記1.にてw.postMessage(interval)でWeb Workerにintervalが送信されてさらに
定期的に null 値を Web Worker に送信するということでしょうか？

②. addEventListener()でsetInterval()の第一引数に実行したい関数、self.postMessage(null)を指定。
実行したい関数の引数としてmsg.dataを渡しているということでしょうか？
Web Worker にはinterval 又は nil しか送信していないと思うのですがmsg.dataで値を取得できますでしょうか？