Me gustaría animar el descifrado de texto. Por ejemplo, tengo el texto encriptado **** long ********* **** y me gustaría reemplazarlo lentamente con some long encrypted text .
Traté de usar el código a continuación, pero reemplaza el texto inmediatamente cuando necesito hacer una pausa después de reemplazar cada símbolo.
function play(encText, decrText) { function showText() { var text = decrText.substring(0, i+1) + encText.substring(i+1); console.log(text); document.getElementById('text').innerHTML = text; } for( var i=0; i < encText.length+1; i++ ) { setTimeout( showText(), i*5000 ); } }Consulte https://jsfiddle.net/bwf0Layg/ .
¿Cómo podría arreglar eso?
Puede crear un cierre para su showText en su bucle i, devolviendo una función.
Además, cambié tu HTML interno a texto interno, para evitar que sucedan algunas cosas raras, y reduje el tiempo de 5 segundos para fines de demostración.
p.ej.
function play(encText, decrText) { function showText(i) { return () => { var text = decrText.substring(0, i + 1) + encText.substring(i + 1); document.getElementById('text').innerText = text; } } for (var i = 0; i < encText.length + 1; i++) { setTimeout(showText(i), i * 100); } } play(document.getElementById('text').innerText, 'some long encrypted text') <div id="text"> **** long ********* **** </div>El problema con su código es que la última ejecución escribe todas las letras a la vez. Lo que podría hacer es crear una función de sleep con una promesa y setTimeout
const sleep = ()=> new Promise((resolve)=> setTimeout(resolve,5000)); async function play(encText, decrText) { function showText(i) { var text = decrText.substring(0, i + 1) + encText.substring(i + 1); console.log(text); document.getElementById('text').innerHTML = text; } for (let i = 0; i < encText.length + 1; i++) { await sleep(); showText(i) } }por lo tanto, en cada iteración, su código "duerme" o espera durante 5 segundos antes de pasar a la siguiente iteración, lo que hace que aparezca esta letra lenta.