2

Estou com o seguinte código:

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>

Minha dúvida é como deixar a parte do js com loop infinito. Depois de o código ler todo o js, ele simplesmente para na última tag do array. Como fazer ele ficar em loop e ficar repetindo os valores do array?

1

1 Resposta 1

1

neste ponto, no lugar de interromper o fluxo, reinicie o valor de current_word

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

então teremos isto.:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .