悬停和鼠标悬停会不断触发

Question

我试图一一显示字母，并在访问页面时将其添加为白色。它可以完美地做到这一点，但我试图将其悬停时也做同样的事情。由于某种原因，我的悬停函数调用似乎在没有实际悬停的情况下被触发。

我尝试过的事情：

1）将其更改为鼠标悬停事件。 2）使用.stop（）

HTML：

<div class="mainContent">
    <div id="myName"></div>
</div>

Css：

  .active{
      background-color: white;
      width: 10px;
  }

JS：

$(document).ready(function () {
var showText = function (target, message, index, interval) {
    if (index < message.length) {
        $(".active").removeClass("active");
        $(target).append
            (
            "<span class = 'active'>" +
            message[index++] +
            "</span>"
            );
        setTimeout(function () { showText(target, message, index, interval); }, interval);
    }
    else{
        $(".active").removeClass("active");
        $("#myName").mouseover(showText("#myName", "IKeepRepeating", 0,50));
    }
};
showText("#myName", "IKeepRepeating", 0, 50);

}）;

https://jsfiddle.net/xf7ugt85/3/