for循环迭代之间的延迟

Question

问题

我有一个函数，它接受一个字符串列表，遍历它们并将每个字符串打印到一个新行。我添加了一些 CSS 动画，这些动画需要几秒钟才能完全显示字符串。

我面临的问题是我想不出一种方法来等待前一个字符串完全显示后再开始下一个字符串的动画。我在下面添加了一个片段 - 如果我解释得不好，请见谅。

预期结果

对于我们传递给 newComputerMessage(messages) 函数的数组中的每个字符串，它应该打印一个新行，但仅在前一行完全显示之后。

let userInputs = [];
const textBox = document.querySelector(".textBox");
const userInput = document.querySelector(".userInput");
const letters = /^[A-Za-z]+$/;
let user = {
  name: "",
  timeInterval: -1,
  halt: false,
  quit: false
};

function captureUserInput() {
  let text = userInput.value;
  userInput.value = "";
  return text;
}

function nameEntered() {
  enteredName = captureUserInput();
  if (!enteredName.match(letters)) {
    newComputerMessage(">>Please only use Letters");
  } else {
    user.name = enteredName;
    newComputerMessage([">>Hello there " + user.name, ">>Second message"]);
  }
}

function newComputerMessage(messages) {
  for (let index = 0; index < messages.length; index++) {
    const newPElement = document.createElement("p");
    newPElement.innerHTML = messages[index];
    newPElement.setAttribute("class", "computerText");
    textBox.appendChild(newPElement);
  }
}

.textBox {
  width: max-content;
}

.computerText {
  color: black;
  font-family: monospace;
  overflow: hidden;
  border-right: 0.15em solid orange;
  white-space: nowrap;
  margin: 0 auto 0 0;
  letter-spacing: 0.15em;
  animation: typing 3.5s steps(30, end), blink-caret 0.5s step-end infinite;
  width: max-content;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

<body>

  <div class="displayScreen">
    <div class="textBox">
      <p class="computerText">>>Hello, please enter your name below</p>
    </div>

  </div>

  <div class="appInput">
    <input class='userInput' type="text" name="fname"><br>
    <input onclick="nameEntered()" class="button" type="submit" value="Submit">
  </div>
  </div>

</body>

Answer 1

您可以使用如下所示的setTimeout。第一个片段是一个工作示例。第二个片段是它在您的代码中的样子：

我用了 3500 毫秒，因为我注意到 3.5s 是你 CSS 中的动画时间。您可以根据需要进行更改。

function newComputerMessage() {
  for (let index = 0; index < 3; index++) {
    setTimeout(() => console.log('appending element'), 3500 * index);
  }
}

newComputerMessage();

因此，就您的代码而言，它将是：

function newComputerMessage(messages) {
  for (let index = 0; index < messages.length; index++) {
    const newPElement = document.createElement("p");
    newPElement.innerHTML = messages[index];
    newPElement.setAttribute("class", "computerText");
    setTimeout(() => textBox.appendChild(newPElement), 3500 * index);
  }
}

for循环迭代之间的延迟

delay between for loop iterations

html

javascript

css

arrays

input