问如何管理requestAnimationFrame

EN

const navMenu = document.querySelectorAll("#menu li"),
  navMenuText = document.querySelectorAll("#menu li a"),
  translation = document.querySelectorAll("#translation li"),
  originalEnglish = [],
  originalJapanese = [];

navMenuText.forEach((e) => {
  originalEnglish.push(e.innerHTML);
});
translation.forEach((e) => {
  originalJapanese.push(e.innerHTML);
});

const glitch = ["-", "+", "=", `[`, `;`, "#", "%", "^", "*", "_"];

navMenu.forEach((e) => {
  // });
  e.addEventListener("mouseover", () => {

    // move all the variables declarations inside the mouseover handler
    let target;
    let frame = 0;
    let frame2 = 0;
    let singleText;
    let singleText2;

    let callbackId;
    let times;

    let isRunning = false;


    target = [].slice.call(navMenu).indexOf(e);

    if (!navMenu[target].classList.contains("trasnlated")) {
      navMenu[target].classList.add("trasnlated");

      singleText = originalEnglish[target].split("");
      times = singleText.length * 2;
      frame = 0;

      function glitchTranslation() {
        if (frame < times + translation[target].innerHTML.length) {
          if (frame < times) {
            singleText[Math.floor(Math.random() * singleText.length)] =
              glitch[Math.floor(Math.random() * 10)];
            navMenuText[target].innerHTML = singleText.join("");
          } else {
            singleText[frame - times] =
              translation[target].innerHTML[frame - times];

            navMenuText[target].innerHTML = singleText
              .join("")
              .slice(0, translation[target].innerHTML.length);
          }
          isRunning = true;
          callbackId = requestAnimationFrame(glitchTranslation);
        } else if (frame === times + translation[target].innerHTML.length) {
          isRunning = false;
        }
        frame++;
      }
      glitchTranslation();
    }
  });
});

#menu {
  display: flex;
  flex-direction: column;
}

#menu li {
  margin: 20px 0;
  display: inline-block;
  width: 150px;
  border: 1px solid pink;
}

<header>
  <nav>
    <ul id="menu">
      <li id="trigger1"><a href="#">something</a></li>
      <li id="trigger3"><a href="#">earth</a><span class="bar"></span></li>
      <li id="trigger4">
        <a href="about.html">human</a><span class="bar"></span>
      </li>
      <li id="trigger6">
        <a href="#">contact</a><span class="bar"></span>
      </li>
    </ul>

    <ul id="translation" style="display: none">
      <li>なにか</li>
      <li>地球</li>
      <li>人間</li>
      <li>お問い合わせ</li>
    </ul>
  </nav>
</header>
<main></main>
<footer></footer>