我該如何阻止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。看的時候評論說，離開會發生什麼。

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

現在，您將得到的結果說，這是 '未定義'。顯然不是你想要的。停止播放的正確方法是在動畫完成時取消播放時間間隔。

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

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

剛需要清除setInt erval完成後：

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