CODEWITHSUNDEEP
javascriptjqueryhtml
Daryan
Daryan

Reputation: 325

How can i stop Javascript animated text from repeating?

i have this code for showing up these letters and words one by one, but my problem is that the code is still repeating, can someone help me to know how to stop it?

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

Upvotes: 1

Views: 209

Answers (3)

Govind Samrow
Govind Samrow

Reputation: 10179

Just need to clear setInterval after done:

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

Upvotes: 0

user94559
user94559

Reputation: 60143

In this version, change is only called again if there are still remaining elements in 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>

BTW, here's a way to avoid having to type "W|", "We|", etc. and make the code more reusable:

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

Upvotes: 1

Dylan Meeus
Dylan Meeus

Reputation: 5802

It repeats because you set the counter to 0. See what happens when I comment that away.

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

Now you'll get the result saying that it is 'undefined'. Clearly not what you want either. The correct way of stopping this is to cancel the interval when the animation has finished. 

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

Upvotes: 4

Related Questions