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 part of js with infinite loop. After the code reads the entire js, it simply stops at the last array tag. How to make it loop around and keep repeating array values?