timeInterval with nested timeOut

Question

after page loading I need:

• wait 7 sec
• aniwrap.text() - LOREM IPSUM
• wait 7 sec
• aniwrap.text() - DOLOR SIT
• and so on - repeating the pause and changing the text

In my try - I have only the second text, without the first one

any help?

var i;
var txt = '';
var arra = ["LOREM IPSUM", "DOLOR SIT"];
var aniwrap = $('#aniwrap');

function write() {
  if (i < txt.length) {
    document.getElementById("aniwrap").innerHTML += txt.charAt(i);
    i++;
    setTimeout(write, 70);
  }
}

function single(){
    $(arra).each(function(el, val){
        setTimeout(function(){
            aniwrap.text('');
            i = 0;
            console.log(val);
            txt = val;
            write();
        }, 7000);
    });
}

$(window).on('load', function(){
    setInterval(single, 7000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='aniwrap'></div>

Answer 1

Declare a variable that determines the index of the word in the arra array:

var index = 0;

I removed the each() method and did it in a different way:

function single(){
  setTimeout(function(){
    index++;
      ...
      txt = arra[index % arra.length];
      ...
  }, 7000);
}

var i;
var index = 0;
var txt = '';
var arra = ["LOREM IPSUM", "DOLOR SIT"];
var aniwrap = $('#aniwrap');

function write() {
  if (i < txt.length) {
    document.getElementById("aniwrap").innerHTML += txt.charAt(i);
    i++;
    setTimeout(write, 70);
  }
}

function single(){
  setTimeout(function(){
    index++;
      aniwrap.text('');
      i = 0;
      console.log(arra[index % arra.length]);
      txt = arra[index % arra.length];
      write();
  }, 7000);
}

$(window).on('load', function(){
    setInterval(single, 7000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='aniwrap'></div>