如何使用 javascript 替換打字機效果中的單詞

Question

現在我正在練習javascript，我想對一段文字做一個打字機效果，一個字符一個字符顯示，然后暫停1秒，然后一個一個刪除。 我已經完成了這部分並且它對我有用，但是我想做更多的事情，首先是我想在每次刪除前一個單詞時打印一個不同的單詞，這些單詞將在數組中預定義以進行迭代對他們來說，第二個是讓這件事無限期地進行下去。

接下來我給大家展示一下我有什么，就是打印和刪除一個單詞：

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

這對我來說可以顯示和刪除一個單詞，但是我嘗試與其他人一起迭代但我沒有成功，我也想無限期地完成這個 function

Answer 1

 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>