Desenvolvi um sistema que escreve, de modo sequenciado, uma frase dentro da minha div
e, após alguns segundos, ele substitui o texto por um outro pré programado. Ele funciona normalmente, mas, caso eu mude a guia por algum tempo e retorne a guia onde o sequenciador está, ele simplesmente enlouquece juntando os 3 textos em um só.
Alguém sabe como poderia resolver isso ou me explicar o motivo que isso acontece?
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>
<div id="log"></div>
texto[3]
?texto[3]
que nem existe.