Javascript setTimeout 无法按预期工作[重复]答案

【问题标题】：Javascript setTimeout doesn't work as expected [duplicate]Javascript setTimeout 无法按预期工作[重复]
【发布时间】：2021-03-30 15:38:53
【问题描述】：

我想写一个简单的代码，一个字母一个字母地写一些句子，然后一个一个地删除它们。我想在写完每个字母后延迟并添加下一个字母，但代码在等待 1000 毫秒后才写 hellobye。

const writeSentences = () => {
  const sentences = ["hello", "bye"];
  const config = {
    writeDelay: 1000,
    removeDelay: 100,
    readingDelay: 250
  };
  const element = document.getElementById("sentence");

  sentences.forEach((sentence) => {
    sentence.split("").forEach((letter) => {
      setTimeout(() => {
        element.innerHTML += letter;
      }, 1000);
    });
  });
};

window.addEventListener("DOMContentLoaded", writeSentences());

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

【问题讨论】：

不是直接你的问题，而是当你将它传递给addEventListener() 时删除writeSentences() 的括号。否则它将立即执行，而不是在加载 DOM 内容时执行。

标签： javascript html

【解决方案1】：

只需将delay 存储在一个变量中，并将下一个元素的延迟添加为last delay + 1000。

let delay = 1000;
  const getDelay = () => {
    delay += config.writeDelay;
    return delay;
  };

const writeSentences = () => {
  const sentences = ["hello", "bye"];
  const config = {
    writeDelay: 1000,
    removeDelay: 100,
    readingDelay: 250
  };
  const element = document.getElementById("sentence");
  
  let delay = 1000;
  const getDelay = () => {
    delay += config.writeDelay;
    return delay;
  };
  
  sentences.forEach((sentence) => {
    sentence.split("").forEach((letter) => {
      setTimeout(() => {
        element.innerHTML += letter;
      }, getDelay());
    });
  });
};

window.addEventListener("DOMContentLoaded", writeSentences());

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

【讨论】：