テカウントダウンタイマーの止め方

Question

現在カウントダウンタイマーを作成しており、
下記記述でタイマー自体はできたのですが、タイマーが00:00:00:00を過ぎても動き続けてマイナス表示になってしまいました。
そこでタイマーを00:00:00:00ちょうどで止めたいです。

$(document).ready(function(){
//オブジェクト取得
const counter = document.querySelector('.counter');

//あと何日メソッド
function countdowntimer(){

//今の日時
const d1 = new Date();
//ターゲット日時
const d2 = new Date('2021/1/13 18:00');
//時差（ミリ秒）
const d3 = d2 - d1;
// ミリ秒から秒に
const d3_Sec = Math.floor(d3 / 1000);

//分、時、日の秒数
const Minute_Sec = 60;
const Hour_Sec = 60 * 60;
const Day_Sec = 60 * 60 * 24;

//あと何日  
const d4_Day = Math.floor(d3_Sec / Day_Sec);
const Day = ("00" + d4_Day).slice( -2 );

//あと何時間
const d5_Hour = Math.floor(d3_Sec / Hour_Sec  % 24);
const Hour = ("00" + d5_Hour).slice( -2 );

//あと何分
const d6_Minute = Math.floor(d3_Sec / Minute_Sec % 60);
const Minute = ("00" + d6_Minute).slice( -2 );

//あと何秒
const d7_Sec = Math.floor(d3_Sec % 60);
const Sec = ("00" + d7_Sec).slice( -2 );
   
//カウントダウン
counter.innerHTML = "<span>" + Day + "</span><span>" + Hour + "</span><span>:</span><span>" + Minute + "</span><span>:</span><span>" + Sec + "</span>";

//1秒ごとに実行
setTimeout(nanNichi, 1000);
}

//関数実行
countdowntimer();
});

改善点としてclearTimeoutを使ってとめる方法があると分かり
下記コードに修正したところタイマーが動的に動かなくなり、ロードするごとに動くようになってしまいました。

$(document).ready(function(){
const counter = document.querySelector('.counter');
function countdowntimer(){
    const countdown = setTimeout(function(){
     //今の日時
const d1 = new Date();
//ターゲット日時
const d2 = new Date('2020/12/24 17:55');
//時差（ミリ秒）
const d3 = d2 - d1;
// ミリ秒から秒に
const d3_Sec = Math.floor(d3 / 1000);
//分、時、日の秒数
const Minute_Sec = 60;
const Hour_Sec = 60 * 60;
const Day_Sec = 60 * 60 * 24;
//あと何日  
const d4_Day = Math.floor(d3_Sec / Day_Sec);
const Day = ("00" + d4_Day).slice( -2 );
//あと何時間
const d5_Hour = Math.floor(d3_Sec / Hour_Sec  % 24);
const Hour = ("00" + d5_Hour).slice( -2 );
//あと何分
const d6_Minute = Math.floor(d3_Sec / Minute_Sec % 60);
const Minute = ("00" + d6_Minute).slice( -2 );
//あと何秒
const d7_Sec = Math.floor(d3_Sec % 60);
const Sec = ("00" + d7_Sec).slice( -2 );
const remainDay = (d2 - d1);
     if (remainDay >= 0){
     counter.innerHTML = "<span>" + Day + "</span><span>" + Hour + "</span><span>:</span><span>" + Minute + "</span><span>:</span><span>" + Sec + "</span>";
     if ((Day == 0) && (Hour == 0) && (Minute == 0) && (Sec == 0)) {//指定の日時が来たら、
      clearTimeout(countdown);//カウントダウンを止める
      counter.innerHTML = "<span>test1</span>";//htmlに出力
      }
     }else{//指定の日時が過ぎてもテキストを表字させる用
        counter.innerHTML = "<span>test2</span>";
      }
    }, 1000);//処理を1秒後に予約
  }
  countdowntimer();//関数を呼び出す
});

動的に動かしつつ、目的の日時（00:00:00:00）になったときにタイマーをストップさせるにはどうすればよいのでしょうか。

Answer 1

「ピッタリ」止めることはできない。
setTimeoutは「指定時間が経過した後、できるだけ早く」処理を呼び出す仕組みだ。
CPUが他の仕事をしていたりしたら遅れることもあるし、そもそもコードの処理には時間がかかるので、予定していた時刻ピッタリに関数が起動しても、差を計算する処理までの間に時間が経過する事は避けられない。
だから普通は「ゼロ」ではなく「ゼロ以下」になったら処理を止める。

最初のコードの方が手間がかからないのでこっちを改造する方向で書くと、 d3_Sec の初期化行を
const d3_Sec = Math.max(Math.floor(d3 / 1000), 0);
とでもして、表示に使う時刻が0を下回らないようにしたうえで、setTimeoutを

if(d3 > 0){
    setTimeout(nanNichi, 1000);
}

とでもすればいいだろう。

setInterval を使った方がもう少しコードは綺麗になるのだが、改善点を上げているとキリがないので控える。