すみません。小一時間悩んで頭がパンクしたのでどなたか教えて頂けないでしょうか。

該当コード

javascript:sw.js
1let point = 0;
2let deleteDo = false;
3point = setInterval(() => {
4  console.log("ping");
5  console.log(deleteDo);
6  if (deleteDo) clearInterval(point);
7}, 1000);
8
9if ("serviceWorker" in navigator) {
10  navigator.serviceWorker.register("./sw.js").then(e => {
11    e.unregister().then(() => {
12      deleteDo = true;
13    });
14  });
15}

html:index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <script src="./sw.js"></script>
7</head>
8<body></body>
9</html>

環境

ブラウザ: Microsoft Edge バージョン 97.0.1072.62 (64 ビット)
index.html側より読み込まれるsw.js内にて発生

発生している事象

2つ解決できない事象が発生しています。

1つめの事象 = deleteDoの値が意図せず書き換わる

上記コードのうちlet deleteDo = falseですがswのunregist指示後にtrueを代入することでsetInterval内でclearIntervalを呼びこの繰り返し処理を停止させようとしています。
しかしsetInterval側のログを見ると以下のようになります。
false → true → false → false...
※ 一度はtrueとなるが、以降はfalseとなってしまう

2つめの事象

1つめの事象で一度trueにはなっているのでそこでclearIntervalが実行されれば1は一旦気に留めないのですが if (deleteDo) clearInterval(point);が一度trueで実行されても繰り返し処理が止まりません。

質問

質問1、２とも何故このような挙動になってしまうのか、また、これを解決するにはどうすればいいのか教えて頂く事は出来ないでしょうか

you_19000

2022/01/23 06:50

一点考えながら暫定の対策としては以下であれば事象を回避出来ると認知しています。スコープの問題？ ``` const run = () => { let point = 0; let deleteDo = false; point = setInterval(() => { console.log("ping"); console.log(deleteDo); if (deleteDo) clearInterval(point); }, 1000); if ("serviceWorker" in navigator) { navigator.serviceWorker.register("./sw.js").then(e => { e.unregister().then(() => { deleteDo = true; }); }); } }; if (self.window !== undefined) { console.log("run"); run(); } ```

you_19000

2022/01/23 06:51

質問解答欄ってMarkdown効かないんですかね

行動規範の内容に同意します

回答2件

ありがとうございます

ページスクリプトとServiceWorkerが両方実行されて問題現象が発生しています。

記載いただいた上記の内容で解決出来ました。
お手数おかけ致しました

投稿2022/01/31 15:13

you_19000

総合スコア31

ベストアンサー

ページスクリプトとServiceWorkerが両方実行されて問題現象が発生しています。

ServiceWorker の登録と登録解除の処理を実装しており、ServiceWorker本体は未実装と言う認識だと思われますので、次のようにコードを変更してください。

js:sw.js(一部変更)
1console.log('Page Script.');
2let point = 0;
3let deleteDo = false;
4point = setInterval(() => {
5  console.log("ping");
6  console.log(deleteDo);
7  if (deleteDo) clearInterval(point);
8}, 1000);
9
10if ("serviceWorker" in navigator) {
11  navigator.serviceWorker.register("./sw2.js").then(e => { // ←主な変更箇所
12    e.unregister().then(() => {
13      deleteDo = true;
14    });
15  });
16}

js:sw2.js（新規作成）
1console.log('Service Worker.');

質問１：意図せず書き換わってはいません。ページと ServiceWorker の２重動作なだけです。
質問２：ServiceWorker 側のdeleteDoはまだfalseのままです。

投稿2022/01/23 14:41

k08045kk

総合スコア384

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

clearIntervalをしてもsetIntervalの処理が止まらない

該当コード

環境

発生している事象

1つめの事象 = deleteDoの値が意図せず書き換わる

2つめの事象

質問

関連した質問