マウスアウト時の処理開始時間を遅らせる方法

実現したいこと

マウスオーバーでアニメーションを開始し、マウスアウトのn秒後（仮に5秒とする）にアニメーションが終了するような処理を行いたい。

発生している問題・分からないこと

①ボタンAにマウスオーバーすると要素Bに対してホバーアニメーションが動作する
②ホバーアニメーションはa～cの3パターン用意、マウスーバーを行うたびにa⇒ｂ⇒cと順番に切り替わる

上記①②の処理を作成し、現状ではボタンAからマウスアウトするとすぐにアニメーションが終了する仕様になっています。

こちらを、マウスアウトしてもしばらくアニメーションが続くように変更したいです。
また、【マウスオーバーしてアニメーションaが開始】⇒【マウスアウトしてもアニメーションaが継続】⇒【再びマウスオーバーしたら仮にアニメーションaの動作時間が残っていてもアニメーションbに切り替え】というように、マウスオーバーを起点として強制的に次のアニメーションが開始するようにしたいと考えています。

transition-delayで実現できるかどうかダメ元で試してみましたが上手くいきませんでした。

また、javascriptのsetTimeoutを用いて実現できそうだと考えましたが、どこにどのようにコードを記載すれば動作するのかが全くわかりません。
②の処理でjavascriptを用いていますが、以前別の質問をした際に回答してくださった方の参考データをほぼそのまま使用させて頂いており、自身はまだ勉強中でjavascriptに関してほぼ知識がないため初歩的な質問でしたら申し訳ありません。

該当のソースコード

<div id="target">要素B</div>
<div id="btn">ボタンA</div>

/*ボタンA*/
#btn{
  width:20%;
  aspect-ratio: 1 / 1;
  background-image:url(ボタンA.png);
  background-size:100%;
  justify-content:center;
  align-items:center;
}

/*要素Bのホバーアニメーションa～c*/
.anime_a{
 background-image:url(back_a.png);
 background-repeat: no-repeat;
 background-size: 100%;
}
.anime_b{
 animation:blink_b 0.2s infinite;
 background-image:url(back_b.png);
 background-repeat: no-repeat;
 background-size: 100%;
}
.anime_c{
 animation:blink_c 2s infinite;
 background-image:url(back_c.png);
 background-repeat: no-repeat;
 background-size: 100%;
}

@keyframes blink_b{
  0%{opacity: 1;}
  25%{opacity: 0;}
  50%{opacity: 1;}
  75%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes blink_c{
  0%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}

//ホバーごとにアニメーションa～cの切り替え
document.addEventListener('mouseover', e=>{
  const prev=target.dataset.prev??"anime_c";
  if(e.target.matches('#btn') ){
    if(prev=="anime_c") target.classList.add('anime_a');
    if(prev=="anime_a") target.classList.add('anime_b');
    if(prev=="anime_b") target.classList.add('anime_c');
  }
});

document.addEventListener('mouseout', e=>{
  if(e.target.matches('#btn')){
    if(target.matches('.anime_a')) target.dataset.prev="anime_a";
    if(target.matches('.anime_b')) target.dataset.prev="anime_b";
    if(target.matches('.anime_c')) target.dataset.prev="anime_c";
    target.classList.remove('anime_a');
    target.classList.remove('anime_b');
    target.classList.remove('anime_c');
  }
});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

思いつく範囲で変更や修正を行いましたが反映されませんでした。

補足

特になし

行動規範の内容に同意します

回答1件

ベストアンサー

AbortController を使うとすっきり書けるかもしれません。

js
1let controller = new AbortController();
2const sleep = (time, signal) =>// abort付きスリープ関数
3    new Promise(resolve => {
4        setTimeout(resolve, time)
5        signal.addEventListener('abort', resolve)
6    });
7
8//ホバーごとにアニメーションa～cの切り替え
9document.addEventListener('mouseover', async e => {
10    const prev = target.dataset.prev ?? "anime_c";
11    if (e.target.matches('#btn')) {
12        await controller.abort(); // スリープを強制終了させる
13        if (prev == "anime_c") target.classList.add('anime_a');
14        if (prev == "anime_a") target.classList.add('anime_b');
15        if (prev == "anime_b") target.classList.add('anime_c');
16    }
17});
18
19document.addEventListener('mouseout', async e => {
20    if (e.target.matches('#btn')) {
21        if (target.matches('.anime_a')) target.dataset.prev = "anime_a";
22        if (target.matches('.anime_b')) target.dataset.prev = "anime_b";
23        if (target.matches('.anime_c')) target.dataset.prev = "anime_c";
24        controller = new AbortController();
25        await sleep(5000, controller.signal); // スリープ強制終了されなければ 5000ミリ秒待機
26        target.classList.remove('anime_a');
27        target.classList.remove('anime_b');
28        target.classList.remove('anime_c');
29    }
30});