SetTimeout 让我感到困惑，我需要能够承诺它

Question

我有 2 个单独的 div 元素，并且我有一个定义每个元素的函数，并且应该只作用于该元素。所以当我调用typeField(name,element1) 它应该只输入element1 并且类似地然后我调用typeField(address,element2) 它应该只输入element2.. 但目前如果你检查我的codepen实现它正在混合字符我不确定为什么。

此外，在此之后，我需要找到一种方法，让我首先输入要输入的名称，然后在完成之后我需要开始输入地址。我的假设是我需要承诺这些功能，然后将它们称为 async/await。这是正确的方法吗？还是我想多了？

所以我的两个问题是

1. 我在代码中做错了什么，混淆了元素 innerHTML 中的内容？
2. 一旦解决了，我如何才能先创建第一个元素类型，然后在完成后开始下一个元素类型

如有任何帮助解决此问题，我们将不胜感激。

这是我的 Codepen 的链接

https://codepen.io/alimbolar/pen/Rwjoqbm?editors=1111

const typewriter1 = document.getElementById('typewriter1');
const typewriter2 = document.getElementById('typewriter2');
const name = 'Alim Bolar';
const address = "Some part of the world";
const currentLocation = "Bali, Indonesia";
const profile = "Frontend Development, Backend Development, WordPress Development"
let content = "";
let i = 0;

function typeField(x, element) {
  if (i < x.length) {
    alphabet = x.charAt(i);
    content = content + alphabet;
    element.innerHTML = content;
    i++;
    setTimeout(function() {
      typeField(x, element)
    }, 500);
  }
}
typeField(name, typewriter1);
typeField(address, typewriter2);

<header>

  <div>NAME : <span id="typewriter1"></span></div>
  <div>ADDRESS : <span id="typewriter2"></span></div>

</header>

Answer 1

你需要

• 没有i 或content 是全局的，因为那样它将被typeField 的所有调用共享
• 将 typeField 分配给外部的持久 Promise，进一步的调用将被链接

考虑await在循环中使用 Promise，它看起来比递归更简洁。

const typewriter1 = document.getElementById('typewriter1');
const typewriter2 = document.getElementById('typewriter2');


const name = 'Alim Bolar';
const address = "Some part of the world";
const currentLocation = "Bali, Indonesia";
const profile = "Frontend Development, Backend Development, WordPress Development"

let prom = Promise.resolve();

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
function typeField(textToInsert, element) {
  prom = prom.then(async () => {
    for (const char of textToInsert) {
      element.textContent += char;
      await delay(500);
    }
  });
}

typeField(name, typewriter1);
typeField(address, typewriter2);

<header>
  <div>NAME : <span id="typewriter1"></span></div>
  <div>ADDRESS : <span id="typewriter2"></span></div>
</header>