2回目以降に関数が発動されたとき、先に動いた関数を止めたい

Question

前提・実現したいこと

現在javascript（jQuery）を使用してWebアプリを開発しています。

画面上にクリックできるAというブロック（以後Aと呼ぶ）があるとします。
このAをクリックしたときカウントダウンタイマーの処理が入っている関数（関数名：CDT）が実行されます。

例えですが、このカウントダウンが10秒だったとして、タイマーが0秒になったら画面上に「Time UP!」と表示します。
（この部分は問題なく実装できています）

このカウントダウンが10秒～0秒の間で、再度Aをクリックしたとき、タイマーを初期化して10秒に戻し、
再度10秒から0秒に向かってカウントダウンを始めるようにしたいです。

この1回目の関数を実行中に再度同じ関数を実行した場合に1回目の関数を止める方法を知りたいです。
※2回目の処理実行中に3回目の処理が発生した場合は2回目を止めるといった具合です。

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

現状の書き方ですと、1回目に関数を実行した後、2回目にAをクリックすると1回目の関数が生きたまま2回目の処理として関数が動きます。
1回目にAをクリックして、例えばカウントダウンが残り5秒のタイミングで再度Aをクリックした場合、1回目の残り5秒と2回目の10秒のカウントダウンが同時に走ります。
そうすると、1回目のカウントダウンが0秒になった時、2回目の関数はまだ処理中であっても「Time UP!」と表示されてしまいます。

（そもそも先に動いた関数を後からの処理で止めるということが技術的に可能かどうかも不明な状態です…）

該当のソースコード

// タイマーがカウント中か0秒か確認する用の非表示要素
<p id="timecheck">0</p>

// 画面上に表示するタイマー
<p class="time" id="time"></p>

// クリックする要素
<p id="start">Aブロック要素</p>

// 「Time UP!」を表示する要素
<p class="result-txt"></p>

// #startをクリックして関数を実行
$(document).on("click", "#start", function(){
    CDT();
});


// ▼時間の設定
function CDT() {
	var myD = Date.now();
	var start = new Date(); // クリックしたタイミングの時間を取得
	var myS = start.getTime(); // ミリ秒取得
	var end = new Date(start.setSeconds(start.getSeconds() + 10)); // タップした時間に＋10秒
	var myE = end.getTime(); // ミリ秒取得

	// 判別
	if (myS <= myD && myE>= myD) {
		var tl = end;
	} else if (myS > myD) {
		var tl = start;
	}

	var timer = new CountdownTimer('time', tl, 'Time UP!'); // 終了日後のテキスト
	timer.countDown();
}

▼問題の都度停止して再度動かしたい関数

// ▼ カウントダウンタイマー
function CountdownTimer(elm, tl, mes) {
	this.initialize.apply(this, arguments);
}
CountdownTimer.prototype = {
	initialize: function (elm, tl, mes) {
		this.elem = document.getElementById(elm);
		this.tl = tl;
		this.mes = mes;
	},
	countDown: function () {
		var timer = '';
		var today = new Date();
		var day = Math.floor((this.tl - today) / (24 * 60 * 60 * 1000));
		var hour = Math.floor((day * 24) + ((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
		var min = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 1000)) % 60;
		var sec = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 1000) % 60 % 60;
		var milli = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 10) % 100;
		var me = this;

		var timecheck = $('#timecheck').text();

		if (timecheck == '0') {
			// 正常時
			if ((this.tl - today) > 0) {
				// カウントダウン処理
				if (hour) timer += '';
				timer += '<span class="cdt_num">' + this.addZero(sec) + '</span><small>秒</small><span class="cdt_num">' + this.addZero(milli) + '</span>';
				this.elem.innerHTML = timer;
				tid = setTimeout(function () {
					me.countDown();
				}, 10);
			} else {
				// カウントが0秒になった場合ステータスを1に変更して再度関数を動かす
				$('#timecheck').text('1');
				me.countDown();
			}
			return false;

		} else if (timecheck == '1') {
			// 時間切れになった時の処理を記載
			$('.result-txt').html(this.mes);
			return false;

		}
	},
	addZero: function (num) {
		return ('0' + num).slice(-2);
	}
}

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

カウントダウンの処理については下記の記事に記載のあるコードを参照しています。
Javascriptでセールに最適なカウントダウンタイマーを設置する

Answer 1

こういうことですか？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var timerId;
  document.querySelector('#start').addEventListener('click',()=>{
    document.querySelector('.result-txt').textContent="";
    var max=10;
    var start=new Date().getTime();
    clearInterval(timerId);
    timerId=setInterval(function(){
      var now=new Date().getTime();
      var count=Math.ceil(max-(now-start)/1000);
      document.querySelector('#timecheck').textContent=count;
      if(count<=0){
        document.querySelector('.result-txt').textContent="Time up!";
        clearInterval(timerId);
      }
    },100);
  });
});
</script>
<p id="timecheck">0</p>
<p id="start">Aブロック要素</p>
<p class="result-txt"></p>

Comments

[Webtuuuu]

コメントありがとうございます！
こちらのコードで記載していた条件は達成できました！

カウントダウンの秒数にミリ秒をリアルタイムで表示させたかったので、本回答を頂いてからこちらの質問を見つけました。
https://teratail.com/questions/79958

こちらと合わせて考えることでミリ秒の実装もできるかなと思います。

本質問の「1回目の関数を止める方法」についてはこちらで解決なのでベストアンサーとさせていただきます！

[yambejp]

ミリ秒単位でやるならワーカーを利用するとよいですよ