如何用JS从列表取单词逐字符延迟输出 模拟自动补全效果

问题原因 #

你之前的代码出错主要有两个核心原因：

• 异步闭包陷阱：setTimeout 是异步执行的，等回调触发时，循环已经执行完毕，此时的i和遍历到的单词e都已经是最终值，无法拿到循环过程中的对应值
• 延迟时间设置错误：所有定时器的延迟都设为相同值，所有回调会几乎同时触发，无法实现逐字间隔显示的效果

实现代码 #

推荐用async/await的方式实现，逻辑清晰没有闭包问题，可直接复用：

const words = ["design", "frontend", "backend"];
const output = document.getElementById("complete");
// 单字符显示间隔，单位毫秒，可自行调整
const CHAR_DELAY = 200;
// 单个单词完整显示后停留的间隔，单位毫秒，可自行调整
const WORD_STAY_DELAY = 1000;

// 延迟工具函数
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function autoComplete() {
  // 循环遍历所有单词
  for (const word of words) {
    // 每次显示新单词前清空之前的内容，如果需要所有单词顺序拼接展示可删掉这行
    output.textContent = '';
    // 逐字拼接当前单词
    for (let i = 0; i < word.length; i++) {
      output.textContent += word[i];
      await delay(CHAR_DELAY);
    }
    // 完整单词停留一段时间，不需要停留可删掉这行
    await delay(WORD_STAY_DELAY);
  }
}

// 启动自动补全效果
autoComplete();

效果说明 #

默认实现为：逐字显示第一个单词，完整显示后停留1秒，清空后逐字显示下一个单词，依次循环完所有单词。如果不需要切换单词、只想按顺序拼接所有单词内容，删掉清空内容的代码行和单词停留的代码行即可。

内容的提问来源于stack exchange，提问作者S.H