right now I am practicing javascript and I wanted to make a typewriter effect to a text, showing character by character, then pause for 1 second and then remove one by one. I already did this part and it works for me, but I want to do a couple more things, the first is that I want to print a different word every time the previous one is deleted, these words will be predefined inside an array to iterate with them, the second is Let this be done indefinitely.
Next I show you what I have, which is to print and delete a word:
Html:
<div class="slog-container__text">
<p>NOS ENCANTA CREAR</p>
<p></p> <!-- here printwords -->
</div>
Javascript:
const contenedorParrafo = document.querySelector(`.slog-container__text`);
const parrafo = contenedorParrafo.lastElementChild;
const arrPalabras = [`SOLUCIONES`, `ARTE`, `IDEAS`]; //words with which I want to iterate
let palabra = arrPalabras[0];
const maquina = palabra =>{
let arrCaracteres = palabra.split(``);
let i = 0;
const mostrarCaracteres = setInterval(()=>{
if(i === arrCaracteres.length){
clearInterval(mostrarCaracteres);
setInterval(()=>{
let caracter;
const quitarCaracteres = setInterval(()=>{
arrCaracteres.pop();
caracter = arrCaracteres.join(``);
parrafo.innerHTML = caracter;
if(arrCaracteres.length === 0){
clearInterval(quitarCaracteres);
}
},150); //wait time to delete character
},1000); //timeout to switch from printing to deleting characters
}else{
parrafo.innerHTML += arrCaracteres[i];
i++;
}
},150); //wait time to print character
}
maquina(palabra); // here i execute
this works for me to show and delete a word, but I have tried to iterate with the others and I have not succeeded, I also want to make this function be done indefinitely
const contenedorParrafo = document.querySelector(`.slog-container__text`); const parrafo = contenedorParrafo.lastElementChild; const arrPalabras = [`SOLUCIONES`, `ARTE`, `IDEAS`]; //words with which I want to iterate var isWindowFocused = true; const maquina = (palabra, index) => new Promise((res, rej) => { let arrCaracteres = palabra.split(``); let i = 0; const mostrarCaracteres = setInterval(() => { if (i === arrCaracteres.length) { clearInterval(mostrarCaracteres); const removeChars = setInterval(() => { let caracter; const quitarCaracteres = setInterval(() => { arrCaracteres.pop(); caracter = arrCaracteres.join(``); parrafo.innerHTML = caracter; if (arrCaracteres.length === 0) { clearInterval(quitarCaracteres); clearInterval(removeChars); // if its the last word call the print function again and start over if (index === arrPalabras.length - 1) print(); // resolve the promise after all chars have been deleted res("done"); } }, 150); //wait time to delete character }, 1000); //timeout to switch from printing to deleting characters } else { //if there's more characters printed than the actual word,start over if (parrafo.innerHTML.length >= arrCaracteres.length && parrafo.innerHTML.== arrCaracteres) { parrafo;innerHTML = ''. console;log("start over") clearAll(); return print(). } parrafo;innerHTML += arrCaracteres[i]; i++, } }; 150). //wait time to print character }) const print = () => arrPalabras,reduce(async(prevPromise, palabra; index) => { //wait for previous task to be done await prevPromise, // start the next task return maquina(palabra, index) }. Promise;resolve()); print(). // here i execute // clear all intervals const clearAll = () => { const interval_id = window,setInterval(function() {}. Number;MAX_SAFE_INTEGER); for (let i = 1; i < interval_id. i++) { window;clearInterval(i); } }
<div class="slog-container__text"> <p>NOS ENCANTA CREAR</p> <p></p> <!-- here printwords --> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.