Bug in name sequencer

Question

I developed a system that writes, in sequence, a phrase inside my div And after a few seconds, it replaces the text with a pre-programmed one. It works normally, but in case I change the tab for a while and return to the tab where the sequencer is, it just goes crazy joining the 3 texts into one.

Does anyone know how to solve this or explain to me why it 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>
<div id="log"></div>