Letras que aparecen una tras otra erro

[patilanz]

Hola tengo el siguiente codigo :

Código Javascript:

var texto = 'Hola mundo';
var i = 0;
    var elintervalo = setInterval(function() {
        if(i<texto.length) {
            document.getElementById('contenido').innerHTML = texto.substr(0,i+1);   
        } else {
            clearInterval(elintervalo); 
        }
        i ++;
        
    },30);
 

Esto me escribe en una div con innerHTML un texto pero con un efecto como este :

1: H
2: Ho
3: Hol....

Pero en el codigo tiene un error que es que cuando el muestro del texto esta en curso y doy click en otro button que escribe otra cosa en el div tambien con innerHTML el texto del otro boton aparece para 1 segundo y luego desaparece y se continua con el muestro del texto del intervalo...

Alguien sabe como solucionar lo ??

Gracias :)