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)

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

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)

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

1 个答案: