时间戳

首页 > 解决方案 > 如何在 JavaScript 中实现暂停和删除打字机效果？

javascript - 如何在 JavaScript 中实现暂停和删除打字机效果？

问题描述

在这里是 JS 的新手，想知道是否有人可以指导我在 JavaScript 中实现打字机效果时如何暂停和删除。我有一个函数可以成功地键入数组中的每个单词，但是我希望它在键入每个单词并退格后暂停，或者在键入下一个单词之前删除字母。

//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>

标签： javascriptcssarrays

解决方案

您可以通过引入一个变量来确定index将如何变化（+1 或 -1）。不同的延迟只是setTimeout.

我还建议将一些全局变量转换为函数参数：这样它们的范围会更好（更窄）。这些变量获得的更改可以通过您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>

推荐阅读