打字机故障

Question

我有以下打字机代码，当用户滚动到第二部分时会输入单词。一切都很顺利，除了一些单词没有顺利输入。我怎样才能消除这个故障？

codepen link

＆＃13;

＆＃13;

$(window).scroll(function(event) {
  if ($(window).scrollTop() > $("section:nth-of-type(2)").offset().top - 20) {
    // array with texts to type in typewriter
    var dataText = [
      "Amsterdam.",
      "Full Service.",
      "Webdevelopment.",
      "Wij zijn Occhio!"
    ];

    // type one text in the typwriter
    // keeps calling itself until the text is finished
    function typeWriter(text, i, fnCallback) {
      // chekc if text isn't finished yet
      if (i < text.length) {
        // add next character to h1
        document.querySelector("section:nth-of-type(2) h1").innerHTML =
          text.substring(0, i + 1) + '<span aria-hidden="true"></span>';

        // wait for a while and call this function again for next character
        setTimeout(function() {
          typeWriter(text, i + 1, fnCallback);
        }, 100);
      } else if (typeof fnCallback == "function") {
        // text finished, call callback if there is a callback function
        // call callback after timeout
        setTimeout(fnCallback, 700);
      }
    }
    // start a typewriter animation for a text in the dataText array
    function StartTextAnimation(i) {
      if (typeof dataText[i] == "undefined") {
        setTimeout(function() {
          StartTextAnimation(0);
        }, 20000);
      }
      // check if dataText[i] exists
      if (i < dataText[i].length) {
        // text exists! start typewriter animation
        typeWriter(dataText[i], 0, function() {
          // after callback (and whole text has been animated), start next text
          StartTextAnimation(i + 1);
        });
      }
    }
    // start the text animation
    StartTextAnimation(0);
  }
});

＆＃13;

body {
  background-color: #FF5A5A;
  height: 100%;
  font-family: 'tradegothiclt-bold', sans-serif;
}

h1 {
  font-size: 5em;
  color: white;
  text-transform: uppercase;
}

span {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}

section{
  height:600px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <h1>Hallo, Wij zijn Occhio!</h1>
</section>  
<section>
  <h1>Hallo, Wij zijn Occhio!</h1>
</section>

＆＃13;

＆＃13;

＆＃13;