JavaScript中如何實現暫停和刪除打字機效果？

Question

這里是 JS 的新手，想知道是否有人可以指導我在 JavaScript 中實現打字機效果時如何暫停和刪除。 我有一個 function 可以成功鍵入數組中的每個單詞，但是我希望它在鍵入每個單詞和退格后暫停或在鍵入下一個單詞之前刪除字母。

 //counter var i = 0; var index = 0; var texts = ['Salesforce Consultant', 'Developer', 'Writer']; var speed = 110; let letter = ''; let currentText = ''; let delay = 25; function typeWriter() { //If counter is less than the # of letters in txt, reset array of words if (i === texts.length) { i = 0; } //Use count to select text to display currentText = texts[i]; letter = currentText.slice(0, ++index); document.querySelector("#demo").textContent = letter; //If letters displayed are the same number of letters in the current text if (letter.length === currentText.length) { //Pause before deleting //Delete letters in word //Word is done displaying, and reset letters on screen i++; index = 0; } setTimeout(typeWriter, speed); } typeWriter();

 <div id="demo"></div>

HTML

    <div class="centered">
    <div class="intro">
        <p>A &thinsp;</p> 
        <p class ="typing" id="demo"></p>
    </div>
</div>

Answer 1

您可以通過引入一個變量來確定index將如何變化（+1 或 -1）。 不同的延遲只是setTimeout的不同參數。

我還建議將一些全局變量轉換為 function 參數：這樣它們的范圍更好（更窄）。 這些變量獲得的更改可以通過您讓setTimeout傳遞給下一次調用的內容來管理。

這是如何工作的：

 const texts = ['Salesforce Consultant', 'Developer', 'Writer']; const speed = 110; const pause = 800; // <--- the longer delay between text direction changes function typeWriter(i=0, index=1, direction=1) { let displayed = texts[i].slice(0, index); document.querySelector("#demo").textContent = displayed; if (displayed.length >= texts[i].length) { // start removing after pause setTimeout(() => typeWriter(i, index-1, -1), pause); } else if (displayed.length === 0) { // go to next text after pause setTimeout(() => typeWriter((i+1) % texts.length), pause); } else { // continue in the current direction setTimeout(() => typeWriter(i, index+direction, direction), speed); } } typeWriter();

 <div id="demo"></div>