如何等待以迭代方式打印行？

Question

我正在建设一个终端，像个人网站，我想展示一个欢迎横幅+信息一个接一个。我有一个很酷的效果，每个行从上到下出现，字符从左到右(你自己看看这里)。

我的问题是，欢迎横幅和欢迎信息是相互混淆的。因此，我想等到横幅打印出来后再打印消息。但是我的代码一定是错了..。(我尝试使用等待/异步) ..。

这里有一个关于这个问题的可复制的小例子。字符"a“的所有行应在带有"b”字符的行之前打印。你能指出问题的根源吗？

​

banner = ["aaaaaaaaaaaaaaaa", "aaaaaaaaaaaaaaaa", "aaaaaaaaaaaaaaaa", "aaaaaaaaaaaaaaaa"]
welcomeMsg = ["bbbbbbbbbbbb", "bbbbbbbbbbbb", "bbbbbbbbbbbb", "bbbbbbbbbbbb"]
var before = document.getElementById("before");


setTimeout(async function() {
  await loopLines(banner, "", 80);
  loopLines(welcomeMsg, "", 80);
}, 100);

async function addLine(text, style, time) {
  var t = "";
  for (let i = 0; i < text.length; i++) {
    if (text.charAt(i) == " " && text.charAt(i + 1) == " ") {
      t += "&nbsp;&nbsp;";
      i++;
    } else {
      t += text.charAt(i);
    }
  }
  setTimeout(function() {
    var next = document.createElement("p");
    next.innerHTML = t;
    next.className = style;

    before.parentNode.insertBefore(next, before);

    window.scrollTo(0, document.body.offsetHeight);
  }, time);
  return;
}

async function loopLines(name, style, time) {
  for (var i = 0; i < name.length; i++) {
    await addLine(name[i], style, i * time);
  }
  return;
}

p {
  display: block;
  line-height: 1.3em;
  margin: 0;
  overflow: hidden;
  /* white-space: nowrap; */
  margin: 0;
  letter-spacing: 0.05em;
  animation: typing 0.5s steps(30, end);
  /* font-size: calc(2vw + 7px); */
  font-size: min(20px, calc(1.5vw + 7px));
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

<a id="before"></a>

​

Answer 1

在addLine中，您不使用await。相反，您可以调用setTimeout，但这不会返回一个悬而未决的承诺。因此，addLine返回的承诺立即得到解决，而无需等待超时时间的完成。

要改变这一点，请使用setTimeout的promisified。我在片段的顶部添加了它的定义。然后看看addLine在哪里使用它而不是setTimeout

​

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

banner = ["aaaaaaaaaaaaaaaa", "aaaaaaaaaaaaaaaa", "aaaaaaaaaaaaaaaa", "aaaaaaaaaaaaaaaa"]
welcomeMsg = ["bbbbbbbbbbbb", "bbbbbbbbbbbb", "bbbbbbbbbbbb", "bbbbbbbbbbbb"]
var before = document.getElementById("before");


setTimeout(async function() {
  await loopLines(banner, "", 80);
  loopLines(welcomeMsg, "", 80);
}, 100);

async function addLine(text, style, time) {
  var t = "";
  for (let i = 0; i < text.length; i++) {
    if (text.charAt(i) == " " && text.charAt(i + 1) == " ") {
      t += "&nbsp;&nbsp;";
      i++;
    } else {
      t += text.charAt(i);
    }
  }
  await delay(time);  // <---------------
  var next = document.createElement("p");
  next.innerHTML = t;
  next.className = style;
  before.parentNode.insertBefore(next, before);
  window.scrollTo(0, document.body.offsetHeight);
}

async function loopLines(name, style, time) {
  for (var i = 0; i < name.length; i++) {
    await addLine(name[i], style, i * time);
  }
}

p {
  display: block;
  line-height: 1.3em;
  margin: 0;
  overflow: hidden;
  /* white-space: nowrap; */
  margin: 0;
  letter-spacing: 0.05em;
  animation: typing 0.5s steps(30, end);
  /* font-size: calc(2vw + 7px); */
  font-size: min(20px, calc(1.5vw + 7px));
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

<a id="before"></a>

​