javascript - 如何从列表中获取单词并以时间延迟逐字符显示它们

Question

我想模拟一个自动完成功能。一个句子应该用列表中的单词完成。这些单词应在句末逐字符显示。
这是 HTML:

<p>We can help you with<span id="complete"></span></p>

这是 JS 的一部分:

let words = ["design", "frontend", "backend"];
let output = document.getElementById("complete");

首先我尝试了这个:

words.forEach((e) => {
  for (i = 0; i < e.length; i++) {
    setTimeout(() => {
      console.log(e[i]);
    }, 500);
  }
});

控制台记录:

我 想 这是因为迭代器前进了之前 设置超时。
所以我尝试了一个这样的while循环:

words.forEach((e) => {
  let i = 0;
  while (i <= e.length) {
    setTimeout(() => {
      console.log(e[i]);
    }, 600);
    i++;
  }
});

我懂了:

我不知道如何逐个字符放置 - 以便它们加起来像:d;德;德;德西;设计；设计与每个字符之间的延迟。
(要在 DOM 中逐个字符地放置单词，我不会使用控制台日志，而是使用 complete.innerHTML += variableForWordinList[index for char])
谢谢

Answer 1

setTimeout是异步的。因此，当它执行该函数时，您正在记录的值已经发生了变化。
你想要实现的是一种打字机效果。可以使用 setInterval 的组合来实现和 setTimeout .

let words = ["design", "frontend", "backend"];
let output = document.getElementById("complete");

let idx = 0;
let str = "";

function typeWrite() {
  if (idx >= words.length) idx = 0;

  let word = words[idx];
  let charInd = 0;
  let interval = setInterval(() => {
    if (charInd >= word.length) {
      clearInterval(interval);
      setTimeout(() => {
        idx++;
        str = "";
        typeWrite();
      }, 1000);  // <- Wait for 1 sec before printing next word
    }
    str += word.charAt(charInd);
    output.innerHTML = str;
    charInd++;
  }, 100); // <- Delay between each character
}

typeWrite();

<p>We can help you with <span id="complete"></span></p>