Cuando usas setInterval no necesitas un bucle, puesto que precisamente lo que hace es ejecutar la función repetidamente. Puedes usar un bucle con setTimeout o una sola llamada a setInterval: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> const texto = 'En un lugar de la Mancha...'; let nombre = document.getElementById('nombre'); let index=0; let intervalId = setInterval(function(){ nombre.innerHTML +=texto[index++]; if (index === texto.length) { clearInterval(intervalId); } }, 200); <!-- language: lang-html --> <p id="nombre"> </p> <!-- end snippet --> Con setTimeout sería algo como: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> const texto = 'En un lugar de la Mancha...'; let nombre = document.getElementById('nombre'); for (let i = 0; i < texto.length; i++) { setTimeout(() => { nombre.innerHTML +=texto[i]; }, 200*i); } <!-- language: lang-html --> <p id="nombre"> </p> <!-- end snippet -->