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

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>

Answer 3

だけクリアする必要がありますsetInt行われた後erval：どういたしまして@Daryan

あなたが使用することができます

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