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

Question

我有这个代码用于逐个显示这些字母和单词，但我的问题是代码仍在重复，有人可以帮助我知道如何阻止它吗？

 <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>

Answer 1

它会重复，因为你将计数器设置为0.看看当我发表评论时会发生什么。

＆＃13;

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

现在，您将获得结果，表明它未定义＆＃39;。显然不是你想要的。停止此操作的正确方法是取消动画结束时的间隔。

＆＃13;

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在此版本中，change仅在text中仍有剩余元素时再次调用。

<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>

Answer 3

完成后只需要清除 setInterval ：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;