Javascript 如何从forEach方法中删除不需要的计数增量？

我很难从我的中的

forEach

方法中消除不需要的计数增量

算法很简单：

EventManager（）

向每个

menucell

注册一个名为

mouseenter

的事件

menuCount（）

获取目标单元格的当前

索引。接下来，在新节点的
索引
之间对其进行匹配，以显示或隐藏
单元格

slateCount（）

从

menuCount（）

获取目标

项，并使用
forEach（）
获取
li
的索引

问题是每次我重新启动事件时，

forEach（）

本身的增量都在不断增加，就像这样：（无法想象更好地描述单词。词汇有限的问题：|）

这可能不是什么大问题，因为函数实际上只是获取一个索引。但由于我注意到这是不正常的，我想知道为什么以及如何消除不必要的增量计数

我一直在试图找到如何解决我的案例，但仍然没有找到任何信息或文章

有解决这个问题的办法吗

“严格使用”；
常量Slater=（函数（）{
让menu=document.querySelector（'.menu'），
slate=document.querySelector（'.slate'）；
让node_menuCells=menu.querySelectorAll（'.cell'），
node_slateCells=slate.querySelectorAll（'.grid.first>.cell'）；
设menuCells=Array.from（node_menuCells）；
函数EventManager（阵列、节点）{
array.reduce（（初始、长度、当前）=>{
节点[current].addEventListener（'mouseenter'，（e）=>menuCount（e，current，node_单元格））；
}, 0);
}
函数菜单计数（事件、索引、节点）{
log（`menuCell count为：${index}`）；
node.forEach（（项目，i）=>{
让比较=（i==索引）？item.classList.add（'show'）：item.classList.remove（'show'）；
计数（项目）；
})
}
功能计数（项目）{
让node_cellItems=item.querySelectorAll（'li'）；
node_cellItems.forEach（（listItem，n）=>{
listItem.addEventListener（'mouseenter'，（e）=>{
log（`slateCell count为：${n}`）；
})
})
}
返回{
初始化：EventManager（菜单项、节点菜单项）
}
}());
*{
保证金：0；
填充：0；
颜色：白色；
}
ulli{
列表样式：无；
文字装饰：无；
填充：20px0；
}
.布局{
宽度：900px；
显示器：flex；
柔性流：行；
对齐项目：居中；
背景色：#4141；
}
.菜单{
高度：60px；
}
.细胞{
利润率：0.20px；
字体系列：'Helvetica'；
}
斯莱特先生{
边框顶部：1px实心rgb（160、117、0）；
高度：20雷姆；
}
.电网{
宽度：50%；
身高：100%；
边框：1px实心rgb（160117,0）；
}
.grid>.cell{
显示：无；
位置：绝对位置；
颜色：rgb（36,88,21）；
}
.显示{
显示：块！重要；
}

洛勒姆
同侧阴沟
圣骑士
西米利克

示例文本001
样本文本002


示例文本003
示例文本004


示例文本001
样本文本002


示例文本003
示例文本004

在您的代码中，每当您将鼠标悬停在顶部菜单上时，都会运行for循环，以便在slate项上添加事件侦听器。因此，如果您第一次悬停石板项目，其行为与您预期的相同，只记录一次。但是，如果重复悬停菜单的操作，将越来越多的相同事件侦听器添加到slate项中，因此日志开始迅速膨胀，导致内存泄漏

要解决这个问题，请提取将事件侦听器添加到init函数中的逻辑，以便它只执行一次

function EventManager(array, node) {
    array.reduce((init, length, current) => {
        node[current].addEventListener('mouseenter', (e) => menuCount(e, current, node_slateCells));
    }, 0);

    // add the event listeners here
    node_slateCells.forEach(item => slateCount(item));
}

function menuCount(event, index, node) {
    console.log(`menuCell count is: ${index}`);
    node.forEach((item, i) => {
        let comparing = (i == index) ? item.classList.add('shown') : item.classList.remove('shown');
        // slateCount(item);
    })
}

function slateCount(item) {
    let node_cellItems = item.querySelectorAll('li');
    node_cellItems.forEach((listItem, n) => {
        listItem.addEventListener('mouseenter', (e) => {
            console.log(`slateCell count is: ${n}`);
        })
    })
}

该死的，我无法想象这个解决方案有多简单，谢谢你帮我组织我的问题。