Text Infinity Rotator

Question

I have the following code:

var words = ['Buy it',
    'Use it',
    'Break it',
    'Jam it',
    'Unlock it', 
    'Save it'],
     current_length = 0,
     current_direction = 1,
     current_word = 0,
     character_delay = 50,
     word_delay = 500,
     $title = $('h1'); 
    
    function advanced_text() {
      if(current_direction == -1) {
        $title.addClass('highlighted');
        setTimeout(function() {
          $title.removeClass('highlighted');
          current_length = 0;
          current_direction = 1;
          current_word++;
          setTimeout(advanced_text,0);
        },word_delay/2);
        return;
      }
      current_length += current_direction;
      var timeout_delay = 0;
      set_text($title, words[current_word], current_length);
      if(current_length >= words[current_word].length) {
        current_length = words[current_word].length;    
        current_direction = -1; //Now we're deleting
        if(current_word >= words.length -1) {
          //stop! we're done
          return;
        }
        //set long timout
        timeout_delay = word_delay;
      }
      timeout_delay = timeout_delay ? timeout_delay : (current_direction > 0 ? character_delay-10+Math.random()*20 : character_delay/4);
      setTimeout(advanced_text, timeout_delay);
    }
    
    advanced_text();
    
    function set_text($element, word, length) {
      $element.text(word.substring(0,length));
    }

h1 {
      border-right: 1px solid;
      display:inline-block;
      padding-right:4px;
      animation: 1s infinite blink;
    }
    
    *.highlighted {
      background:#338fff;
      color:#fff;
      display:inline-block;
    }
    
    @keyframes blink {
      0% {
        border-color: rgba(0,0,0,0);
      }
      49.99% {
        border-color: rgba(0,0,0,0);
      }  
      50% {
        border-color: rgba(0,0,0,255);
      }  
      99.5% {
        border-color: rgba(0,0,0,255);
      }  
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>

My question is how to leave the js part with infinite loop. After the code reads all the js, it simply stops at the last tag of the array. How to make it loop and repeat array values?

Answer 1

at this point, instead of interrupting the flow, restart the value of current_word

if(current_word >= words.length -1) {
  //stop! we're done
  return;
}

then we’ll have this.:

if(current_word >= words.length -1) {
  current_word = 0;
}

var words = ['Buy it',
    'Use it',
    'Break it',
    'Jam it',
    'Unlock it', 
    'Save it'],
     current_length = 0,
     current_direction = 1,
     current_word = 0,
     character_delay = 50,
     word_delay = 500,
     $title = $('h1'); 
    
    function advanced_text() {
      if(current_direction == -1) {
        $title.addClass('highlighted');
        setTimeout(function() {
          $title.removeClass('highlighted');
          current_length = 0;
          current_direction = 1;
          current_word++;
          setTimeout(advanced_text,0);
        },word_delay/2);
        return;
      }
      current_length += current_direction;
      var timeout_delay = 0;
      set_text($title, words[current_word], current_length);
      if(current_length >= words[current_word].length) {
        current_length = words[current_word].length;    
        current_direction = -1; //Now we're deleting
        if(current_word >= words.length -1) {
          current_word = 0;
        }
        //set long timout
        timeout_delay = word_delay;
      }
      timeout_delay = timeout_delay ? timeout_delay : (current_direction > 0 ? character_delay-10+Math.random()*20 : character_delay/4);
      setTimeout(advanced_text, timeout_delay);
    }
    
    advanced_text();
    
    function set_text($element, word, length) {
      $element.text(word.substring(0,length));
    }

h1 {
      border-right: 1px solid;
      display:inline-block;
      padding-right:4px;
      animation: 1s infinite blink;
    }
    
    *.highlighted {
      background:#338fff;
      color:#fff;
      display:inline-block;
    }
    
    @keyframes blink {
      0% {
        border-color: rgba(0,0,0,0);
      }
      49.99% {
        border-color: rgba(0,0,0,0);
      }  
      50% {
        border-color: rgba(0,0,0,255);
      }  
      99.5% {
        border-color: rgba(0,0,0,255);
      }  
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>