SetTimeout让我感到困惑，我需要能够暂时解决它 [英] SetTimeout is confusing me and I need to be able to promisify it

问题描述

我有两个独立的div元素，并且我有一个定义每个元素的函数，并且应该只作用于该元素。因此，当我调用typeField(name,element1)时，它应该只键入element1，类似地，然后我调用typeField(address,element2)，它应该只键入element2..但目前，如果你检查我的代码实现，它混合了字符，我不确定为什么。

在此之后，我还需要找到一种方法，首先输入要输入的姓名，然后在完成后，我需要开始输入地址。我的假设是，我需要缩短这些函数，然后将它们调用为Async/AWait。这是正确的方法吗？还是我想得太多了？

所以我的两个问题是

1. 我在代码中做错了什么，混淆了innerHTML元素中的内容？
2. 解决后，如何使第一个元素成为类型，并在完成时启动下一个元素

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

这是指向我的代码的链接

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

推荐答案

您需要

• 不让i或content是全局的，因为这样它将被typeField的所有调用共享
• 将typeField分配给一个永久承诺，从而将进一步的调用链接到

考虑await在循环中使用Promise，它看起来比递归干净得多。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

这篇关于SetTimeout让我感到困惑，我需要能够暂时解决它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！