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

Question

我很难摆脱CodePen中forEach方法中不必要的计数增量。

算法很简单：

1. EventManager()将mouseenter的事件注册到menuCells的每个事件中。

2. menuCount()获取目标单元格的当前index。接下来，在新节点的index之间进行匹配，以显示或隐藏slateCell。

3. slateCount()从item获取目标menuCount()，并使用forEach()获取li的索引。

   < / li>

问题是每次我重新开始活动时，forEach()本身的增加都会增加这样的时间：（无法想象更好地描述单词。词汇量有限问题：|）

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

我一直在尝试找到解决案件或诸如此类的方法，但仍未找到任何信息或文章。

是否有解决此问题的解决方案？

CodePen

'use strict';
const Slater = (function() {
  let menu = document.querySelector('.menu'),
      slate = document.querySelector('.slate');

  let node_menuCells = menu.querySelectorAll('.cell'),
      node_slateCells = slate.querySelectorAll('.grid.first > .cell');

  let menuCells = Array.from(node_menuCells);
  
  function EventManager(array, node) {
    array.reduce((init, length, current) => {
      node[current].addEventListener('mouseenter', (e) => menuCount(e, current, node_slateCells));
    }, 0);
  }
  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}`);
      })
    })
  }
  return {
    initialize: EventManager(menuCells, node_menuCells)
  }
}());

      * {
        margin: 0;
        padding: 0;
        color: white;
      }
      ul li {
        list-style: none;
        text-decoration: none;
        padding: 20px 0;
      }
      .layout {
        width: 900px;
        display: flex;
        flex-flow: row;
        align-items: center;
        background-color: #414141;
      }
      .menu {
        height: 60px;
      }
      .cell {
        
        margin: 0 20px;
        font-family:'Helvetica';
      }
      .slate {
        border-top: 1px solid rgb(160, 117, 0);
        height: 20rem;
      }
      .grid {
        width: 50%;
        height: 100%;
        border: 1px solid rgb(160, 117, 0);
      }
      .grid > .cell {
        display: none;
        position: absolute;
        color: rgb(36, 88, 21);
      }
      .shown {
        display: block !important;
      }

    <div class="menu layout">
      <div class="cell">Lorem</div>
      <div class="cell">Ipsum Dolor</div>
      <div class="cell">Consectetur</div>
      <div class="cell">Similique</div>
    </div>
    <div class="slate layout">
      <div class="grid first">
        <ul class="cell">
          <li>Sample Text 001</li>
          <li>Sample Text 002</li>
        </ul>
        <ul class="cell">
          <li>Sample Text 003</li>
          <li>Sample Text 004</li>
        </ul>
      </div>
      <div class="grid second">
        <ul class="cell">
          <li>Sample Text 001</li>
          <li>Sample Text 002</li>
        </ul>
        <ul class="cell">
          <li>Sample Text 003</li>
          <li>Sample Text 004</li>
        </ul>
      </div>
    </div>

Answer 1

在您的代码中，每次将鼠标悬停在顶部菜单上时，都会运行一个for循环，以将事件侦听器添加到板岩项目上。因此，如果您第一次将鼠标悬停在板岩项目上，其行为与您期望的相同，只记录一次。但是，如果您重复悬停菜单的操作，则会将越来越多的相同事件侦听器添加到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}`);
        })
    })
}