Function single sets up two timer callbacks that will execute successively but more or less immediately one after the other (they are both use a 7000ms timer).
On the first timer callback i is set to 0 and txt to LOREM IPSUM, and write will output the first letter L.
Before a page refresh has a chance to occur (in most cases), the second timer call back executes, which clears the text content of #aniwrap, resets the character pointer i back to zero and replaces the text with DOLOR SIT.
Now write will continue to output DOLOR SIT one letter at a time, but because the timer created in the first call to write was never cancelled, at twice the letter rate anticipated.
This is a timing problem. One way of resolving it would be to set up a different time delay for each line in arra, with another choice being to use a single 7000ms timer to write a single line and then call itself back for the next line with a timer.
Here's an example of the first option with minimum modification of the posted code:
"use strict";
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(index, val){ // argument name change
setTimeout(function(){
aniwrap.text('');
i = 0;
console.log(val);
txt = val;
write();
}, 3500 * index); // <-- change
});
}
$(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>
A third way of resolving the issue might be to put a fixed length pause between lines so they could be any length (timings reduced for this example):
"use strict";
var i;
let lineNum = -1;
var txt = '';
var arra = ["LOREM IPSUM", "DOLOR SIT", "GAUDEAMUS IGITUR"];
var aniwrap = $('#aniwrap');
function write() {
console.log(txt);
if (i < txt.length) {
document.getElementById("aniwrap").innerHTML += txt.charAt(i);
i++;
setTimeout(write, 70);
}
else setTimeout( nextLine, 3500);
}
function nextLine(){
lineNum = ++ lineNum % arra.length;
txt = arra[ lineNum];
aniwrap.text('');
i = 0;
write();
}
$(window).on('load', nextLine)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='aniwrap'></div>