我如何阻止Javascript动画文本重复

重复是因为您将计数器设置为0。看看当我把它注释掉后会发生什么

 <div id="changeText"></div>
    <script type="text/javascript">
    var text = ["|", "W|", "We|", "Wel|", "Welc|", "Welco|", "Welcom|", "Welcome|", "Welcome |", "Welcome t|", "Welcome to|", "Welcome to |", "Welcome to K|", "Welcome to Ka|", "Welcome to Kar|", "Welcome to Karl|", "Welcome to Karla|", "Welcome to Karla'|", "Welcome to Karla's|", "Welcome to Karla's |", "Welcome to Karla's T|", "Welcome to Karla's Tr|", "Welcome to Karla's Tra|", "Welcome to Karla's Trad|", "Welcome to Karla's Tradi|", "Welcome to Karla's Tradin|", "Welcome to Karla's Trading|", "Welcome to Karla's Trading", "Welcome to Karla's Trading|", "Welcome to Karla's Tradin|", "Welcome to Karla's Tradi|", "Welcome to Karla's Trad|", "Welcome to Karla's Tra|", "Welcome to Karla's Tr|", "Welcome to Karla's T|", "Welcome to Karla's |", "Welcome to Karla's|", "Welcome to Karla'|", "Welcome to Karla|", "Welcome to Karl|", "Welcome to Kar|", "Welcome to Ka|", "Welcome to K|", "Welcome to |", "Welcome t|", "Welcome |", "Welcome|", "Welcom|", "Welco|", "Welc|", "Wel|", "We|", "W|", "|"];
    var counter = 0;
    var elem = document.getElementById("changeText");
    setInterval(change, 250);
    function change() {
     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { /* counter = 0;*/ }
    }
    </script>

现在你会得到结果说它是'undefined'。显然也不是你想要的。停止这种情况的正确方法是在动画完成时取消间隔。

 <div id="changeText"></div>
    <script type="text/javascript">
    var text = ["|", "W|", "We|", "Wel|", "Welc|", "Welco|", "Welcom|", "Welcome|", "Welcome |", "Welcome t|", "Welcome to|", "Welcome to |", "Welcome to K|", "Welcome to Ka|", "Welcome to Kar|", "Welcome to Karl|", "Welcome to Karla|", "Welcome to Karla'|", "Welcome to Karla's|", "Welcome to Karla's |", "Welcome to Karla's T|", "Welcome to Karla's Tr|", "Welcome to Karla's Tra|", "Welcome to Karla's Trad|", "Welcome to Karla's Tradi|", "Welcome to Karla's Tradin|", "Welcome to Karla's Trading|", "Welcome to Karla's Trading", "Welcome to Karla's Trading|", "Welcome to Karla's Tradin|", "Welcome to Karla's Tradi|", "Welcome to Karla's Trad|", "Welcome to Karla's Tra|", "Welcome to Karla's Tr|", "Welcome to Karla's T|", "Welcome to Karla's |", "Welcome to Karla's|", "Welcome to Karla'|", "Welcome to Karla|", "Welcome to Karl|", "Welcome to Kar|", "Welcome to Ka|", "Welcome to K|", "Welcome to |", "Welcome t|", "Welcome |", "Welcome|", "Welcom|", "Welco|", "Welc|", "Wel|", "We|", "W|", "|"];
    var counter = 0;
    var elem = document.getElementById("changeText");
    var animation = setInterval(change, 250);
    function change() {
     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { 
              clearInterval(animation); // stop the animation
           }
    }
    </script>

在此版本中，只有在text中还有剩余元素时才会再次调用change。

<div id="changeText"></div>
<script type="text/javascript">
    var text = ["|", "W|", "We|", "Wel|", "Welc|", "Welco|", "Welcom|", "Welcome|", "Welcome |", "Welcome t|", "Welcome to|", "Welcome to |", "Welcome to K|", "Welcome to Ka|", "Welcome to Kar|", "Welcome to Karl|", "Welcome to Karla|", "Welcome to Karla'|", "Welcome to Karla's|", "Welcome to Karla's |", "Welcome to Karla's T|", "Welcome to Karla's Tr|", "Welcome to Karla's Tra|", "Welcome to Karla's Trad|", "Welcome to Karla's Tradi|", "Welcome to Karla's Tradin|", "Welcome to Karla's Trading|", "Welcome to Karla's Trading", "Welcome to Karla's Trading|", "Welcome to Karla's Tradin|", "Welcome to Karla's Tradi|", "Welcome to Karla's Trad|", "Welcome to Karla's Tra|", "Welcome to Karla's Tr|", "Welcome to Karla's T|", "Welcome to Karla's |", "Welcome to Karla's|", "Welcome to Karla'|", "Welcome to Karla|", "Welcome to Karl|", "Welcome to Kar|", "Welcome to Ka|", "Welcome to K|", "Welcome to |", "Welcome t|", "Welcome |", "Welcome|", "Welcom|", "Welco|", "Welc|", "Wel|", "We|", "W|", "|"];
    var counter = 0;
    var elem = document.getElementById("changeText");
    function change() {
        elem.innerHTML = text[counter];
        counter++;
        if (counter < text.length) {
            setTimeout(change, 250);
        }
    }
    change();
</script>

顺便说一句，这里有一种方法可以避免键入"W|", "We|"等，并使代码更具可重用性:

<div id="changeText"></div>
<script type="text/javascript">
    function animate(elem, text) {
        var counter = 0;
        function change() {
            var length = counter;
            if (length > text.length) {
                length = 2 * text.length - counter;
            }
            elem.innerHTML = text.substring(0, length) + "|";
            counter++;
            if (counter <= 2 * text.length) {
                setTimeout(change, 250);
            }
        }
        change();
    }
    animate(document.getElementById("changeText"), "Welcome to Karla's Trading");
</script>

只需要在完成后清除setInterval

<div id="changeText"></div>
<script type="text/javascript">
  var text = ["|", "W|", "We|", "Wel|", "Welc|", "Welco|", "Welcom|", "Welcome|", "Welcome |", "Welcome t|", "Welcome to|", "Welcome to |", "Welcome to K|", "Welcome to Ka|", "Welcome to Kar|", "Welcome to Karl|", "Welcome to Karla|", "Welcome to Karla'|", "Welcome to Karla's|", "Welcome to Karla's |", "Welcome to Karla's T|", "Welcome to Karla's Tr|", "Welcome to Karla's Tra|", "Welcome to Karla's Trad|", "Welcome to Karla's Tradi|", "Welcome to Karla's Tradin|", "Welcome to Karla's Trading|", "Welcome to Karla's Trading", "Welcome to Karla's Trading|", "Welcome to Karla's Tradin|", "Welcome to Karla's Tradi|", "Welcome to Karla's Trad|", "Welcome to Karla's Tra|", "Welcome to Karla's Tr|", "Welcome to Karla's T|", "Welcome to Karla's |", "Welcome to Karla's|", "Welcome to Karla'|", "Welcome to Karla|", "Welcome to Karl|", "Welcome to Kar|", "Welcome to Ka|", "Welcome to K|", "Welcome to |", "Welcome t|", "Welcome |", "Welcome|", "Welcom|", "Welco|", "Welc|", "Wel|", "We|", "W|", "|"];
  var counter = 0;
  var elem = document.getElementById("changeText");
  var setInt = setInterval(change, 250);
  function change() {
    elem.innerHTML = text[counter];
    counter++;
    console.log('c:'+counter +'t:'+text.length);
    if (counter == text.length) {
      console.log('clear');
      clearInterval(setInt);
    }
  }
</script>