3

Estou tentando utilizar a função setInterval para escrever 1 letra a cada segundo, mas não funcionou:

partText = "";

function escrever(text) {   
    for (i = 0; i < text.length; i++) {
        partText += (text.charAt(i));   
        document.getElementById("texto").innerHTML = partText;
    }
}

setInterval(escrever("teste"), 1000);

4 Respostas 4

3

Podes fazer assim:

function escrever(text) {
    var el = document.getElementById("texto");
    for (i = 0; i < text.length; i++) {
        setTimeout(function(letra) {
            el.innerHTML += letra;
        }, 1000 * i, text[i]);
    }
}
escrever('teste');
<div id="texto"></div>

jsFiddle: https://jsfiddle.net/y18afv4t/

A ter em conta:

  • usa += para acrescentar HTML. Somente = vai substituir tudo
  • evita document.getElementByID dentro do for, isso é pesado para o browser. Coloca em cache como fiz no exemplo.
2

O Erro está em duas parte:

1 setInterval.

setInterval(escrever("teste"), 1000);

o correto é

setInterval(function(){escrever("teste")}, 1000);

2 Laço de repetição.

for (i = 0; i < text.length; i++)

Aqui ele sempre vai escrever tudo o que tem no text

Abaixo as alterações:

partText = "";
var index=-1;
function escrever(text) {   

    index++;

    if(index<text.length){    
      partText += (text.charAt(index));   
      document.getElementById("texto").innerHTML = partText;
    }  
    else
    {
      clearInterval(timer);
    }

  }

var timer= setInterval(function(){escrever("teste")}, 1000);

Exemplo|jsfidlle

1
  • Acho desnecessário ter uma variável global só para guardar o index do .charAt Nesse caso era bom ter uma variável para document.getElementById("texto"), assim evitando estar sempre a ir ao DOM buscá-la. Junta também var a partText para não exportar para o espaço global.
    – Sergio
    Commented 21/05/2016 às 17:14
2

O setInterval pode não ser uma boa, porque ele repete indefinidamente (até que seja determinado que ele pare com clearInterval). O que recomendo é que utilize o setTimeout que executa apenas uma vez.

Com isso, seu código ficaria mais ou menos assim:

var partText = "";
function escreverNoObjeto (objeto, texto) {
    objeto.innerHTML = texto;
}

function escrever(text, intervalo) {
    var partText = '';
    var fn = function(texto) {
        return function() {
            /* pode ser document.getElementById("texto")*/
            escreverNoObjeto(document.body, texto);
        };
    };

    for (i = 0; i < text.length; i++) {
        partText += text.charAt(i);

        setTimeout(fn(partText), intervalo * (i + 1));
    }
}

escrever("teste", 1000);

Você ainda poder ver ele funcionando no JSFiddle

Espero ter ajudado \o/

1
  • Estás a declarar var partText = ""; duas vezes, acho que foi esquecimento não? Seria uma boa colcoar em cache o objeto do DOM fora de fn que é chamado n vezes.
    – Sergio
    Commented 21/05/2016 às 17:17
1

Os parametros não são passados assim como está a fazer:

Tente:

setInterval(escrever, 1000, 'test');

Exemplo no jsfiddle.

Não sei se é isso que quer mas assim a impressão de cada letra é instantanea, apenas na str toda é que se nota.

Para fazer letra a letra:

...
<p id="texto"></p>
...

var testStr = 'Vamos lá escrever isto';
function escrever(i) {
    partText = testStr.charAt(i);   
    document.getElementById("texto").innerHTML += partText;
    i += 1;
    if(i < testStr.length) {
        setTimeout(escrever, 400, i); // timing entre cada impressão aqui
    }
}

index_da_letra = 0;
escrever(index_da_letra);

Exemplo no jsfiddle:

1
  • Essa função escrever é chamada eternamente... quando é que ela pára?
    – Sergio
    Commented 21/05/2016 às 18:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .