打字机脚本错误答案

【问题标题】：Typewriter script bug打字机脚本错误
【发布时间】：2018-07-10 18:46:51
【问题描述】：

我有问题。这个脚本有什么问题，为什么在重置消息时一个字母会出现和消失？如何解决？ codepen.io

var i = 0;
var msgnow = 0;
var msg = ["Wiadomość 1", "Wiadomość 2", "Wiadomość 3"]; //message 1, 2, 3
var speed = 100;

function writeMessage() {
  setTimeout(writeMessage, speed);

  if (i < msg[msgnow].length) {
    document.getElementById("messagebar").innerHTML += msg[msgnow].charAt(i);
    i++;
  } else {
    setTimeout(resetMessages, 3000);
  }
}

function resetMessages() {
  document.getElementById("messagebar").innerHTML = "";
  msgnow++;
  i = 0;
  if (msgnow == msg.length) {
    msgnow = 0;
  }
}

writeMessage();

&lt;span id="messagebar"&gt;&lt;/span&gt;

【问题讨论】：

标签： javascript html arrays settimeout

【解决方案1】：

您的 writeMessage 函数会立即（并且始终）创建一个新的超时，而不管之前的超时时间有多长，或者是否有重置挂起。

尝试一次只进行 1 次超时。此外，您应该将类型封装到它自己的范围内，这样您就没有那些全局变量。

考虑以下更改：

var i = 0;
var msgnow = 0;
var msg = ["Wiadomość 1", "Wiadomość 2", "Wiadomość 3"]; //message 1, 2, 3
var speed = 100;
var messagebar = document.getElementById("messagebar");

function writeMessage() {
  if (i < msg[msgnow].length) {
    messagebar.innerHTML += msg[msgnow].charAt(i);
    i++;
    setTimeout(writeMessage, speed);
  } else {
    setTimeout(function() {
      resetMessages();
      setTimeout(writeMessage, speed);
    }, 3000);
  }

}

function resetMessages() {
  messagebar.innerHTML = "";
  msgnow++;
  i = 0;
  if (msgnow == msg.length) {
    msgnow = 0;
  }
}

writeMessage();

&lt;span id="messagebar"&gt;&lt;/span&gt;

这是我使用 async/await 的解决方案：

function $timeout(delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), delay);
  });
}

async function wr(el, word) {
  if (typeof word !== "string") throw new Error("Must provide a String");

  el.innerHTML = "";

  for (let i = 0; i < word.length; i++) {
    el.innerHTML += word[i];
    await $timeout(100);
  }

}

(async function() {
  const typewriterEl = document.getElementById("typewriter");
  await wr(typewriterEl, "hello world");
  await $timeout(1000);
  await wr(typewriterEl, "fizz buzz");
}());

&lt;div id="typewriter"&gt;&lt;/div&gt;

【讨论】：