如何使用settimeout依次实现两个打字机效果，从而通过延迟​​字符和延迟行通过延迟字符打印行字符？

Question

我正在尝试建立一种方法，以使网站上的多条字符串“键入”。我一直在为每一行编写一个新功能，但是现在我试图设置一个函数以循环循环通过一系列字符串，然后在新行中键入每个字符串。但是，我无法正确暂停，只能获得第一个字符串，而第三字符串的一部分则可以实际输入。有没有更好的方法来计算超时，或者有一种更好的方法可以使功能连续运行而不是同时运行？我正在尝试坚持使用香草JavaScript，所以请不要jQuery。

var typeSpeed = 75;
var newSpan = '<span></span><br>';

function newTextSegment() {
  i = 0;
  j = 0;
  stringsArray = ['Type Line 1.', 'Type Line 2.', 'Type Line 3.'];
  arrayLength = stringsArray.length;
  typeLinesConsecutively();
}

function typeLinesConsecutively() {
  if (j < arrayLength) {
    segmentString = stringsArray[j];
    delay = segmentString.length * typeSpeed;

    document.querySelector('body').insertAdjacentHTML('beforeend', newSpan);

    typewriter();

    j++;

    setTimeout(typeLinesConsecutively, delay);
  }
}

//This is the function that will type out letter by letter
function typewriter() {
  var allSpan = document.querySelectorAll('span');
  if (i < segmentString.length) {
    allSpan[allSpan.length - 1].innerHTML += segmentString.charAt(i);
    i++;
    setTimeout(typewriter, typeSpeed);
  }
}

window.onload = (event) => {
  console.log('page loaded');
  newTextSegment();
};

Answer 1

OP的递归延迟功能的方法可以完全坚持一个任务，然后需要以所有逻辑（是否呈现新线路和/或键入新字符）的方式实现，该任务必须由它。

为了提供解决方案和特定特定任务的解决方案，必须选择一种较高抽象的方法。

下一个提供的一个基于两个一般实现的函数...

• 第一个创建 async函数基于解决a promise ，
• 第二个是 asynchronous 生成器函数

重复使用这两个函数两次启用一个解决方案，该解决方案迭代延迟line值（具有新的行延迟），每行迭代迭代延迟char> char> char values（带有特定于字符的特定于字符） （键入）延迟）两次通过 for-wait ... 。

来调用这两个功能

• 设置
• 可以使用
• 可选的

async function* createDeferredValuesPool(asyncFunctions) {
  let asyncFct;
  while (asyncFct = asyncFunctions.shift()) {

    yield (await asyncFct());
  }
}
function createDeferredValueAction(value, delay) {
  return async function () {
    return await (
      new Promise(resolve => setTimeout(resolve, delay, value))
    );
  }
}

async function typeLine(rootNode, line, lineTemplate, charDelay) {
  rootNode
    .insertAdjacentHTML('beforeend', lineTemplate);

  const lineNode = [...rootNode
    .querySelectorAll('[data-line-content]')
  ]
  .slice(-1)[0]; // instead of the not entirely supported `.at(-1)`.

  const deferredCharacterActions = line
    .split('')
    .map(char =>
      createDeferredValueAction(char, charDelay)
    );
  const deferredCharactersPool =
    createDeferredValuesPool(deferredCharacterActions);

  for await (const char of deferredCharactersPool) {
    lineNode.textContent = lineNode.textContent + char;
  }
}
async function typeLines(
  rootNode = document.body,
  lines = [],
  lineTemplate = '<p data-line-content></p>',
  lineDelay = 200,
  charDelay = 10,
) {
  const deferredNewLineActions = lines
    .map(line =>
      createDeferredValueAction(line, lineDelay)
    );
  const deferredNewLinesPool =
    createDeferredValuesPool(deferredNewLineActions);

  for await (const line of deferredNewLinesPool) {

    await typeLine(rootNode, line, lineTemplate, charDelay);
  }
}

(async () => {
  await typeLines(
    document.body,
    ['Type Line 1.', 'Type Line 2.', 'Type Line 3.'],
    '<span data-line-content></span><br>',
    400,
    30,
  );
  await typeLines(
    document.body,
    ['And 2 lines, created by ...', '... default type-settings.'],
  );
})();