JSを使用してX秒後に消える通知カードを作成するが、ホバー上でタイマーがリセットされる

Question

リアクションを使用して、ユーザーがアクションを完了したときに通知カードとして機能するコンポーネントをビルドしています。動作は次のようになります。

ユーザーがフォーラムに投稿を作成すると、そのカードは下部に表示され、修正されます。ユーザーが4秒間ホバーしないと、ユーザーはそれを表示しなくなります。それらの上にマウスを置くと、タイマーはリセットされ、マウスがカードを離れると、タイマーは再び4からカウントダウンします。ここで

は、ロジックのための私の関連するコードです：

let elem = document.getQuerySelector('card'); 

let loop = (el) => { 
    let timer = setTimeout(() => { 
     hide(); 
    }, duration); 

    el.addEventListener('mouseover',() => { 
     clearTimeout(timer); 
     el.addEventListener('mouseout',() => { 
      // let elClone = el.cloneNode(true); 
      // el.parentNode.replaceChild(elClone, el); 
      loop(el); 
     }); 
    }); 

} 

loop(elem) 

このコードは動作しますが、それは要素に冗長なイベントリスナの不必要な量を取り付けてしまいます。私は、要素を複製して置き換えることによって、マウスアウト後にすべてのイベントリスナーを削除しようとしましたが、それは私のためには機能しませんでした。代わりにこの方法を使用しても、カードはまったく消えません。

Answer 1

については、mouseenterとmouseoutを使用すると、リスナーを追加するだけで動作します。

let elem = document.querySelector('card'); 

let loop = (el) => { 
    let timer = setTimeout(() => { 
     hide(); 
    }, duration); 

    el.addEventListener('mouseenter',() => { 
     clearTimeout(timer); 
    }); 

    el.addEventListener('mouseout',() => { 
     // let elClone = el.cloneNode(true); 
     // el.parentNode.replaceChild(elClone, el); 
     timer = setTimeout(()=>{hide()}, duration); 
    }); 
} 

loop(elem)