Javascript 使用JS构建通知卡，该通知卡在X秒后消失，但计时器在悬停时重置

我正在使用React构建一个组件，当用户完成一个操作时，该组件将充当通知卡。行为将是这样的：

当用户在论坛上创建帖子时，卡片将显示在底部，固定。如果用户在它上面停留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)

---

这段代码可以工作，但它最终会向元素附加不必要数量的冗余EventListener。我试图在mouseout之后通过克隆和替换元素来删除所有事件侦听器，但这对我来说不起作用；相反，如果我使用这种方法，卡不会消失

使用

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)

---

也许使用state可以为您提供更多实现这一点的选项。如果其他人没有回答这个问题，我会试一试，然后发回。我认为你不需要用React来回答，我认为他们有设置eventlisteners的替代方案。但是可能是错误的。我对代码进行了一些编辑，这样它就不会递归调用循环。无论我编写了什么代码，尽管与React无关，但都是基于逻辑的，避免了多事件侦听器注册。这很完美，谢谢！我甚至没有想过使用state@DanielZuzevich，但这也会奏效。我认为这个答案要简单得多。