Tengo un pequeño problema con una función que muestra un pequeño texto de bienvenido al inicio de una página. El problema es el siguiente: al cargar la página el mensaje se muestra con total normalidad con un efecto de máquina de escribir pero cuándo cambio de vista, por ejemplo, si hago click en la sección habilidades o contacto y luego hago click de nuevo en la sección inicio el mensaje se muestra de forma totalmente desordenada. Mi lógica me dice que es que la función se sigue ejecutando al salir la vista Inicio y cuándo vuelvo a ella se muestra de esa forma porque no comienza desde cero a ejecutarse (NO SE SI ESTÉ CLARO EN ESO) pero no se me ocurre algo con lo que pueda solventar el problema. A continuación les muestro la vista #1 cuándo cargo la página por primera vez y luego la vista #2 que es cuándo hago click en otra sección y vuelvo nuevamente a la sección Inicio que es cuándo sucede el desorden. También adjunto el código de esta componente para que le echen una ojeada. Gracias a todos de antemano.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-body',
templateUrl: './body.component.html',
styleUrls: ['./body.component.css']
})
export class BodyComponent{
public palabra:string;
public nombre:string ="";
constructor() {
this.palabra ="";
}
ngOnInit(){
let palabra:string = "Bienvenido";
let array:string[] = palabra.split('') ;
let i=0;
let imprimir = setInterval(function repetir(){
if(array[i] != ""){
document.getElementById('texto').innerHTML += array[i];
}
i++;
if(i === array.length+1){
i=0;
document.getElementById('texto').innerHTML="";
}
},600);
};
};
#imagen {
position: fixed;
height: 100%;
width: 100%;
z-index: 1;
}
#contenedor-img{
position: fixed;
width: 100%;
height: 100%;
}
#texto{
z-index: 20;
font-size: 2rem;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
<div class="d-flex align-items-center" id="contenedor-img">
<img src="\assets\img\image.jpg" class="img-fluid" alt="Imágen responsive" id="imagen">
<div class="col-12 col-md-12 col-sm-12 d-flex justify-content-center" id="texto"></div>
</div>