Swift UI 画面遷移時にタイマーを停止したい

Question

### 実現したいこと

Swift UIで画面遷移時にタイマーを停止したい。

前提

ソースコード TobusDataViewModelクラス内にTimer.scheduledTimer()で15秒おきに処理を繰り返すタイマーを設置しておりますが、メモリ解放のため、ContentViewが画面遷移で非表示になった際にタイマー(myTimer)の破棄をするプログラムを実装しております。

ContentView内のVStack()直下の.onDisappear()でTobusDataViewModelクラス内のmyTimerプロパティを呼び出し、invalidate()でタイマーの破棄を試みました。

発生している問題・エラーメッセージ

コンソールでタイマーが停止しているか、確認を行いましたが、タイマーが停止していない(処理が続いている)ことがわかりました。

該当のソースコード

struct TopView: View{
    var routes: [Route] = routeData
    var body: some View {
        NavigationStack {
            ScrollView {
                LazyVGrid(columns: [GridItem()], spacing: 0.0) {
                    ForEach(0 ..< routes.count ,id: \.self) { index in
                        NavigationLink(value: index){
                            Text(routes[index].title)
                        }
                    }
                }
            }
            .navigationBarTitle(Text("ホーム"),displayMode: .inline)
            .navigationDestination(for: Int.self) { value in
                ContentView(id: routes[value].note, busroute: routes[value].busroute, buspole: routes[value].title, startpole1: routes[value].startpole1, startpole2: routes[value].startpole2)
            }
        }
    }
}

struct ContentView: View {
     @ObservedObject private var  tobusDataVM = TobusDataViewModel()
     var body: some View {
         VStack() {
           Text("text")
         }
         .onDisappear(perform:{
             self.tobusDataVM.myTimer.invalidate()
             print("タイマー停止")
         })
         .toolbar {
             ToolbarItem(placement: .navigationBarTrailing) {
                  Button(action: {
                        self.tobusDataVM.myTimer.invalidate()
                   }, label: {
                       Text("タイマー停止")
                   })
              }
         }
     }
 }
     
class TobusDataViewModel: ObservableObject {
    var myTimer: Timer!
    init() {
        myTimer = Timer.scheduledTimer(withTimeInterval:15, repeats: true, block: { (time:Timer) in
            //処理
        })
    }
    //処理
}

試したこと

onDisappear()内に print("タイマー停止")　を記述し、画面遷移時にアクションが実行可能か、確認を行いましたところ、アクションは実行可能である事が分かりました。
しかしながら、該当のソースコードでは、タイマーの破棄が実行されません。
原因が分かる方がいらっしゃいましたら、ご教示いただけますと幸いです。

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

ここにより詳細な情報を記載してください。

Comments

[TakeOne]

これは、どこか別のViewからContentViewに画面遷移してきていて、ContentViewから元の画面に戻る時にタイマーを止めたいということですか? そうであれば、今のコードで問題なさそうに思います。それとも、ContentViewから別の画面に遷移する処理があって、その別画面への遷移時にタイマーを止めたいということですか? そうであれば、 `.onDisappear` は呼び出されないので`invalidate()`も`print("タイマー停止")`も実行されず、タイマーが停止しないまま画面遷移するように思います。いずれにしても、画面遷移時にタイマーを停止したいということであれば、問題が発生する状況が再現できるコード(画面遷移元と画面遷移先の両方の画面遷移処理を含めたコード)を提示する必要があると思います。

[jun9]

TakeOneさんコメントありがとうございます。ソースコードにTopViewを追加致しました。当方がやりたいのは、TopViewからContentViewに画面遷移してきていて、ContentViewからTopViewに戻る時にタイマーを止めたいということです。今回新たに`.onDisappear`の下に`.toolbar`を設置し、タイマー停止ボタンを作成致しました(トップの画像参照)。ボタンをクリックしたところ、View上はデータの更新が停止している事がわかったのですが、コンソール上ではデータの更新が続いています。やはりこれはタイマーが停止ていないと考えるのが正しいでしょうか。

[TakeOne]

画面遷移元のコードが追加されましたが、提示されたコードだけで正常にビルド/実行できますか? `Route` 型や `routeData` が存在していないし、ContentViewの引数にidやbusroute等を指定していますが、それを受け取る変数がContentViewに見当たりません。問題と関係ないと思われる部分は省略してかまいませんが、省略したコードでアプリをビルド/実行して、問題が再現することを確認してから質問していますか?
あと、タイマーを起動する処理の直前に `print("タイマー開始")` を入れると、何が起きているか見えてくると思います。

Answer 1

提示された画面遷移元のコードは、Route型が定義されていなかったり、ContentViewを呼び出す時の引数が合っていなかったりするので、このままコピペしてアプリを実行して再現確認することはできませんでしたが、エラーを適当に修正してアプリを起動したところ、質問の動作が発生することを確認しました。

画面遷移元から単純に1つのContentViewに画面遷移するだけなら元のコードでも問題ないと思いますが、提示されたコードは、ForEachでNavigationLinkを複数生成しており、それぞれのNavigationLinkからContentViewに画面遷移するようになっています。この場合、画面遷移時に複数回ContentViewが再生成されることがあります。

TobusDataViewModelのinitでタイマーを起動する箇所に print("タイマー開始") を入れて実行するとわかると思いますが、画面遷移した時に、複数個の「タイマー開始」がprint表示されることがわかると思います。つまり、画面遷移した時に、ContentViewが複数回生成されていて、TobusDataViewModelもそれに応じて複数生成されているため、そのinit処理でタイマーが複数個生成されているということです。そして、 onDisappear でタイマーを止めても、1個のタイマーしか止められていないため、他のタイマーは動作したままになります。

画面遷移時に複数のContentViewが生成されるのは正常な動作です。ForEachの中に指定したViewは、必要に応じて何度も再描画されることがあり、再描画する時にContentViewを新しく作り直すことがあります。つまり、ForEachの中で表示するViewは、何回再描画され、何回作り直されても良いように作る必要があります。

再描画される度にタイマーを起動し直して良いのであれば、 onDisappear でタイマーを止めるのではなく、次のようにして、TobusDataViewModelのdeinit処理でタイマーを止めれば、同時に起動されるタイマーは1つになるのでうまくいくと思います。

struct ContentView: View {
     @ObservedObject private var  tobusDataVM = TobusDataViewModel()
     var body: some View {
         VStack() {
           Text("text")
         }
         .toolbar {
             ToolbarItem(placement: .navigationBarTrailing) {
                  Button(action: {
                        self.tobusDataVM.myTimer.invalidate()
                   }, label: {
                       Text("タイマー停止")
                   })
              }
         }
     }
 }
     
class TobusDataViewModel: ObservableObject {
    var myTimer: Timer!
    init() {
        print("タイマー開始")
        myTimer = Timer.scheduledTimer(withTimeInterval:1, repeats: true, block: { (time:Timer) in
            print("タイマー処理")
        })
    }
    deinit {
        print("タイマー停止")
        myTimer.invalidate()
    }
}

再描画される度にタイマーを再起動するのが問題な場合は、次のようにして TobusDataViewModel を @StateObject で宣言し、 onAppear でタイマーを開始、 onDisAppear でタイマーを停止するように処理すれば、ContentViewが表示された時にタイマーが開始され、ContentViewを閉じた時にタイマーが停止されるようになると思います。

struct ContentView: View {
     @StateObject private var  tobusDataVM = TobusDataViewModel()
     var body: some View {
         VStack() {
           Text("text")
         }
         .onAppear {
             tobusDataVM.startTimer()
         }
         .onDisappear(perform:{
             tobusDataVM.stopTimer()
         })
         .toolbar {
             ToolbarItem(placement: .navigationBarTrailing) {
                  Button(action: {
                      tobusDataVM.stopTimer()
                   }, label: {
                       Text("タイマー停止")
                   })
              }
         }
     }
 }
     
class TobusDataViewModel: ObservableObject {
    var myTimer: Timer!
    func startTimer() {
        print("タイマー開始")
        myTimer = Timer.scheduledTimer(withTimeInterval:1, repeats: true, block: { (time:Timer) in
            print("タイマー処理")
        })
    }
    func stopTimer() {
        print("タイマー停止")
        myTimer.invalidate()
    }
}

Comments

[jun9]

TakeOneさん　ご回答ありがとうございました。当方もタイマーを起動する処理の直前にprint("タイマー開始")を入れたところ、タイマーが複数個生成されている事が確認できました。画面遷移時に複数のContentViewが生成されていたのですね。ご回答いただいた後者の方法を参考に、コードを書き直しましたところ、問題が解決いたしました。ご丁寧にご解説頂き、問題が発生した原因を理解する事ができました。重ねてお礼申し上げます。