00:07
今回は、箇所分時間タイマー最大の難所、リアルタイムタイマーの謎、これを解消していきます。
このアプリでは役割分担がありまして、残時間の計算はPython、そしてリアルタイムのカウントダウンはJavaScriptが担当しています。
今日の主役はJavaScript側です。
まず結論から、タイマーが動き続ける最大の理由はコード最下部にあるこの1行、SetIntervalです。
ここで何をしているかというと、1秒ごとにトータルセカンドを1減らす、そして同時にアップデートビュー関数を呼び出す、この2つを繰り返しています。
最後の1000という数字、これはミリ秒単位なので、1000ミリ秒イコール1秒という意味になります。
つまりこの1行がタイマーの心臓部です。
では次に最大の山場、アップデートビュー関数を見ていきましょう。
最初の2行では、残時間の表示領域、どの表示形式が選ばれているか、これを取得していきます。
そして重要な分岐、もしトータルセカンドが0以下になった場合、画面に目標達成と表示して処理を終了します。
ここで無駄な再描画を止めているというわけですね。
次に出てくるのがRedHTM="
これは一見地味ですが、とても重要です。
表示を書き換える前に一旦中身を空にする。
これをやらないと表示のゴミが残ってレイアウトが崩れる可能性があります。
そして時間計算パート。
ここでは秒は60で割った余り、分は60で割った余りという形で算出しています。
マスフロアは切り捨て、パーセント記号は余り。
この組み合わせで秒、分、時、日へと分解しているわけです。
さらにif else文で標準表示、日足す分足す秒、時足す分足す秒、分足す秒チェックボックスの選択に応じて表示形式を切り替えています。
ここで品質する3600という数字。
これは60秒×60分、イコール3600秒、つまり1時間を表しています。
そして時間や分が大きくなる表示ではto locale stringを使ってカンマ付きの見やすい数字に成型しています。
03:05
最後に組み立てたhtmlをdisplayinnerhtmlに流し込み、画面を書き換える。
これが1秒ごとに繰り返されることで、リアルタイムタイマーが滑らかに動き続けるという仕組みです。
一見かなり長い関数ですが、役割ごとに分解すると意外と素直な構造なんですね。
次回はPython側の計算ロジックについても踏み込んでいきます。
ということで、次回はPythonJS連携の革新を解説についてお話しする予定です。
ご静聴ありがとうございました。
