I've developed a system that sequentially writes a phrase within my div and, after a few seconds, it replaces the text with another pre-programmed one. It works normally, but if I change the tab for some time and return to the tab where the sequencer is, it just goes crazy putting the 3 texts together.
Does anyone know how to solve this or explain to me why this happens?
var div = document.getElementById('log');
var texto = ['Arroz preto Arroz preto Arroz preto Arroz preto Arroz preto Arroz preto Arroz preto Arroz preto Arroz preto'
, 'Milho e farinha com chibe literalmente'
, 'Um prato de trigo para tres trigres tristes'];
var fundo = ["img/imagem4.jpg", "img/imagem2.jpg", "img/imagem1.png"]
function escrever(str, el) {
$('#log').html('');
var char = str.split('').reverse();
var typer = setInterval(function () {
if (!char.length) return clearInterval(typer);
var next = char.pop();
el.innerHTML += next;
}, 80);
$(document).ready(function () {
$.getScript("assets/plugins/backstretch/jquery.backstretch.min.js", function () {
$(".fullscreen-static-image1").backstretch([
imagem,
], {
duration: 8000,
fade: 400
});
});
});
}
repetir();
setInterval(function () {
repetir()
}, 28000);
function repetir() {
escrever(texto[0], div, fundo[0]);
setTimeout(function () {
escrever(texto[1], div, fundo[1])
}, 10000);
setTimeout(function () {
escrever(texto[2], div, fundo[3])
}, 14000);
setTimeout(function () {
escrever(texto[3], div, fundo[3])
}, 21000);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="log"></div>