document.getElementByIdで操作したHTMLのstyle属性がページ再読み込み時に残る問題について

Question

前提

現在MonacaのクラウドIDEで東京都営バスのバスロケーションアプリを作成しています。

トップページ(top.html)からそれぞれの路線ページ(busRoute.html)に遷移でき、路線ページには現時点のバスの位置、到着予定時刻等が表示されるようしております（document.getElementByIdで該当のバス停のidを指定、DOM操作でバス停の左側のボタンに情報を表示）。そして、setInterval関数を使用し、一定期間で情報が更新されるようにしております。

問題点

しかしながら、一度任意の路線ページを開いたのち、トップページに戻り、再度異なる路線ページを開くと前回開いた路線ぺージの情報（時間、バスの位置）が残ってしまい、一定期間ごとに前回開いたページの情報が表示されてしまいます。

説明が分かりづらいため、下記に画像（①、②）、gifファイル（③）を添付致します。

例）トップページでRH01系統の路線ページを開いたのち、一度トップページに戻り、市01系統の路線ページを開いた場合

【①トップページ】

【②RH01系統の路線ページに遷移】

【③一度①トップページに戻り、市01系統の路線ページに遷移】

該当のソースコード

<ons-page >
    <div ng-controller="topCtrl as top">
        <ons-toolbar style="background-color:#6699CC">
            <div class="left">
                <ons-back-button><p></p></ons-back-button>
            </div>
            <div class="center">
                路線検索
            </div>
        </ons-toolbar>
        <div class="list">
        <ons-list>
            <ons-list-item  modifier="chevron" class="top" ng-repeat="title in top.title track by $index" >
                <ons-row>
                    <ons-col ng-click="top.route(title.index)"width="270px" >
                    <div class="number">{{title.number}}</div>
                    <div class="title">{{title.dep}} - {{title.arr}}</div>
                    </ons-col>
                </ons-row>
            </ons-list-item>
        </ons-list>
    </div>
</ons-page>

app.value('titleService',{
title : [
    {
    index:0,
    number:"RH01",
    arr:"六本木ヒルズ",
    dep:"渋谷駅前",
    routeNote1:"ＲＨ０１:渋谷駅前→六本木ヒルズ:8403:1",
    routeNote2:"ＲＨ０１:六本木ヒルズ→渋谷駅前:8403:2",
    timeNote1:"ＲＨ０１:渋谷駅前→六本木ヒルズ:ＲＨ０１ 六本木ヒルズ行:8403:1:09-100",
    timeNote2:"ＲＨ０１:六本木ヒルズ→渋谷駅前:ＲＨ０１ 渋谷駅前行:8403:2:09-100",
    time1:["10:15","10:20","10:22","10:23","10:28",],
    time2:["08:19","08:22","08:25","08:26","08:28","08:29","08:30","08:34",],
    },
    {
    index:1,
    number:"市01",
    arr:"豊洲市場",
    dep:"新橋駅前",
    routeNote1:"市０１:新橋駅前→豊洲市場:107:1",
    routeNote2:"市０１:豊洲市場→新橋駅前:107:2",
    timeNote1:"市０１:新橋駅前→豊洲市場:市０１ 豊洲市場行:107:1:01-105",
    timeNote2:"市０１:豊洲市場→新橋駅前:市０１ 新橋駅前行:107:2:01-105",
    time1:["05:18","05:20","05:21","05:22","05:26","05:29","05:30","05:34","05:36","05:44",],
    time2:["07:18","07:22","07:25","07:30","07:32","07:34","07:38","07:45",],
    }
  ]
});

app.controller('topCtrl',function(titleService){
    this.title=JSON.parse(JSON.stringify(titleService.title));
    this.route=function(val){
       myNavigator.pushPage('busRoute.html',{data:this.title[val]});
    };
});

app.controller('busRouteCtrl',function($scope, $http){
    this.routeNote1=myNavigator.getCurrentPage().options.data.routeNote1;
    var time=myNavigator.getCurrentPage().options.data.time1;//時間情報
    $http.get("https://XXXXX).
    then(function(response) {
        $scope.busstop=response.data[0]['odpt:busstopPoleOrder'];
    });//バス停情報を取得

    this.showInfo=function(){
        for(var i=0;i<time.length;i++){
            document.getElementById(`${i}`).style.backgroundColor='#66CCCC';![![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-24/0e30f962-0bf0-48c1-a828-0c1008c172f3.gif)](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-24/ab2753ff-ca5f-4894-a414-1f9bc1f7c8e3.gif)
            document.getElementById(`${i}`).textContent=time[i]+'分';
        };
    };
    setInterval(this.showInfo,5000);
});

試したこと

トップページ(top.html)に戻る際にreloadをすれば、前回開いたページの情報が残らず、挙動が正常となりましたが、本質的な解決となっていないため、現在対処法を考えております。

非常に長い期間考えておりますが、解決に至らず、もし分かる方がいらっしゃればと思い、質問させていただきました。

補足情報（FW/ツールのバージョンなど）

実際には、Web APIで動的な路線情報を取得の上、到着時間が一定期間ごとに更新されるよう実装しておりますが、コードが非常に複雑となるため、便宜上省略致しました。

開発プラットフォーム：Monavca
使用言語：JavaScript(Angular JS)

Comments

[itagagaki]

ブラウザのキャッシュではないのですか？

[jun9]

itagagaki様　お返事ありがとうございます。htmlのmeta要素で<meta http-equiv="Cache-Control" content="no-cache"> を指定しましたが、変化は見られませんでした。おそらくキャッシュではないと思料します。

[itagagaki]

すみません。質問の意味を大体理解しました。
MonacaとかOnsenとかは知らないので見当外れかもしれませんが、ちょっとピンときたことがあります。
setInterval() を使っていますが、clearInterval() をしているところが見当たらないですね。
おそらく、busRoute.js を実行したページからどこかに遷移する際には clearInterval() でインターバルタイマーを停止させてから遷移しないと、インターバルタイマーがゾンビのように残っていて、再度同じページに来た時によみがえってしまっているのでは。

[jun9]

こんばんは。ご指摘のとおり、トップページに戻る際にclearInterval()を設置すれば、よみがえることがなくなりました！いろいろと悩みましたが単純なミスでした。あなたにベストアンサーを差し上げたいのですが質問への追記からはベストアンサーにできません。どういたしましょうか。

[itagagaki]

解決した方法をご自分で回答として書いてこの質問を解決済みにされればよいと思います。
私は推測を書いただけですから別にベストアンサーとかは不要です。

Answer 1

setInterval()を設置したものの、clearInterval()をしていなかったため、再度ページを開いた際、前ページのデータがよみがえっていたことがわかりました。トップページへ遷移する際にclearInterval()を設置することで解決できました。