Quiero hacer algo parecido a esto para las alertas de streamlabs (cuando tienes un nuevo suscriptor y eso): https://codepen.io/alticreation/pen/ZYdopE
Al principio lo que hace es que recoge un elemento del DOM y cambia la string por una string aleatoria. Eso lo hace bien. Luego, al pasar medio segundo, cambia la string aleatoria por la string final y quiero que se vaya viendo el proceso como en el ejemplo. En la consola también se ve que el proceso lo sigue bien, pero lo hace todo de golpe.
Lo he intentado también con setInterval, pero tampoco he conseguido que funcione.
window.onload
var domElement = document.getElementById("alert-message");
var texto = domElement.innerHTML;
var falso = ""
var longitud = String(texto).length;
var caracteres = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZabccdefghijklmnñopqrstuwxyz0123456789-+*/|}{[]~\\\":;?/.><=+-_)(*&^%$#@!)}";
for(var i = 0; i < longitud; i++){
falso += caracteres.charAt(Math.floor(Math.random() * 101));
}
falso = String(falso);
domElement.innerHTML = falso
function cambiar(){
for(i = 0; i < longitud + 1; i++){
domElement.innerHTML = falso
setDelay(i);
}
};
cambiar();
function setDelay(i) {
setTimeout(function(){
falso = texto.substr(0,i) + falso.substr(i);
console.log(falso);
domElement.innerHTML = falso
}, 2000);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id= "alert-message">Pepe nos está siguiendo</div>
<script src="src/prueba.js"></script>
</body>
</html>