Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>
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.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.
>
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
Coloca a tag <p>texto</p> para cada chamada de texto