Question

我编写了一个带有退格的简单JavaScript / jQuery打字机，它循环播放了几条消息（＆amp; a background image）。

我面临的问题是，当函数循环时，它们没有被正确写出 - 缺少几个字符。

即。我的阵列是[每个人，狗主人，饮食意识，工人，家庭]，但依次写的是：ryone，g owner，饮食意识，（空白），家庭。

我认为问题可能是某个地方的变量没有被正确重置，或者从前一个消息中解决了长度 - 可能的范围问题。

在Codepen上：https://codepen.io/nathankeenmelb/pen/MOovXJ?editors=0010

相关HTML

sum()

JS，jQuery

<body>
  <div>
    <h2>There's something for<span id="message"> everyone.</span></h2>
  </div>
</body>

Answer 1

我看了一下你的代码。在我看来，您同时同时运行typeWriter和backSpacer。

你的代码有这种结构（我已经简化了很多）：

setInterval(function(){
  function typeWriter() {
    if (char < messages[i].length) {
      char++;
      setTimeout(typeWriter, 50);
    }

  }

  typeWriter();

  let bchar = theMessage.length;

  function backSpacer() {
    if (bchar > 0) {
      bchar--;
      setTimeout(backSpacer, 25);
    }
  }

  backSpacer();
}, loopDuration);

如您所见，您同时调用了typeWriter和backSpacer。 setTimeout将导致这些方法并行运行＆＃34;因此，同时删除和添加字母会导致消息混乱。

我创建了一个更像是状态机的工作示例。这意味着它将首先键入消息。完成后，它将切换到删除消息。当完成后，它将等待重启。

代码并不是很好，但它可以帮助你找到一个有效的解决方案。如果您有任何问题，请在评论中告诉我。

https://codepen.io/andreasmcdermott/pen/ZaXXyK?editors=0010

Javascript打字机不能正确写入和退格

1 个答案: