callback Executar a mesma função seguidamente

[Clayton Baroboskin 0]

Boa noite.

 

tenho a seguinte função de efeito de digitação:

function escrever(texto) {
      var div = document.getElementById('message-list');    
      var char = texto.split('').reverse();
      var typer = setInterval(
      function() {
        if (!char.length) return clearInterval(typer);
        var next = char.pop();
                        $("#message-list").scrollTop($("#message-list").prop("scrollHeight"));

        div.innerHTML += next;
      }, 50);

}

 

Funciona perfeitamente, mas quando preciso chama-la mais de uma vez seguidamente, o texto é misturado. Tentei com callback, mas não consegui fazer funcionar.

escrever("Texto de teste");
escrever("Outro texto de teste);

Retorna:  TOeuxttroo dtee xtteos tdee teste

Alguma idéia??

 

Obrigado.

 

Clayton 

[Progjunior Daniel 34]

Coloca a tag <p>texto</p> para cada chamada de texto

[Clayton Baroboskin 0]

Em 01/08/2018 at 16:21, Progjunior Daniel disse:

Coloca a tag <p>texto</p> para cada chamada de texto

A rotina de efeito de digitação não aceita tags html. Ja tentei.... 

Ou não sei onde nem como colocar.

[Wesley Santos 28]

Isso acontece porque você chama a função duas vezes na mesma hora, ai as duas registram para daqui 50 milesegundos escrever na div, ai passa os 50 milesegundos e as duas sai escrevendo ao mesmo tempo. 

O correto é esperar uma escrever e depois a outra começar, da para resolver isso com promise, fiz um código aqui rapidão e aparentemente deu certo, olha: https://jsfiddle.net/wessleysanttos/ws2m54jv/10/

 

Não sei se é a melhor saída, mas quando der pesquisa sobre Promises.

[Clayton Baroboskin 0]

Em 06/08/2018 at 16:05, Wesley Santos disse:

Isso acontece porque você chama a função duas vezes na mesma hora, ai as duas registram para daqui 50 milesegundos escrever na div, ai passa os 50 milesegundos e as duas sai escrevendo ao mesmo tempo. 

O correto é esperar uma escrever e depois a outra começar, da para resolver isso com promise, fiz um código aqui rapidão e aparentemente deu certo, olha: https://jsfiddle.net/wessleysanttos/ws2m54jv/10/

 

Não sei se é a melhor saída, mas quando der pesquisa sobre Promises.

Wesley, acho é exatamente isso que preciso!!! 
Promise funciona como um callback, certo??
Agora duas coisas: 

Sua rotina funcionou perfeitamente no jsfiddle. Copiei e colei no meu arquivo, mas a linha "return new Promise((sucess, error) => {" acusa erro. Mas funciona!!!

Ja tinha visto Promise, mas só agora entendi o real funcionamento dele. Só ainda não consegui implementar. Veja se consegue me dar uma (outra) luz, por favor:

Tenho a rotina:

 

function escrever(texto)
     {
        var div = document.getElementById('message-list');    
        var char = texto.split('').reverse();
        var typer = setInterval(
            function() {
                if (!char.length) return clearInterval(typer);
                var next = char.pop();
                        $("#message-list").scrollTop($("#message-list").prop("scrollHeight"));
                
                div.innerHTML += next;
                }, 20);
                    atualiza_scroll();
    }

 

Só que chamo ela várias vezes durante a execução. - apenas para explicar, estou fazendo um sistema de atendimento automático. Quase um BOT, mas limitado.

 

        if (((botao.value == 'teste1'))){
                escrever("testando 1");
                escrever("testando 1 de novo");
         }

        else if (((botao.value == 'teste2'))){
                escrever("testando 2");
                escrever("testando 2 de novo");

                escrever("testando 2 mais uma vez");
         }

 

E assim por diante. Mais pra frente, terei que rodar a função mais vezes até....

 

Obrigado 

 

 

Clayton