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

Question

我正在使用 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)

此代码有效，但它最终将不必要的冗余事件侦听器附加到元素。我尝试通过克隆和替换元素在鼠标退出后删除所有事件侦听器，但这对我不起作用;相反，如果我使用这种方法，卡根本不会消失。

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)