JavaScript实现每隔0.5秒逐显字符的跑马灯效果运行异常求助

• 核心问题是所有setTimeout的延迟统一设为500ms，循环执行时会一次性注册全部定时器，所有回调会在0.5秒后同时触发，无法实现逐次显示的效果。
• 需检查DOM元素id和变量divMaquee的拼写是否一致，避免节点获取失败的问题。
• 代码中使用let声明循环变量，不存在传统闭包导致的取值错误问题，这部分逻辑无需调整。

方案1：调整定时器延迟（最小改动） #

只需要把定时器的延迟时间改为500 * y，让每个回调的触发时间依次延后0.5秒即可：

const frase = "Mi primer programa en JS";
const marquee = frase.split('');
const divMaquee = document.getElementById('marquee');
console.log(marquee);

for (let y = 0; y < marquee.length; y++) {
  setTimeout(function() {
    let p = document.createElement('p');
    p.innerText = marquee[y];
    divMaquee.appendChild(p);
    console.log(marquee[y]);
  }, 500 * y); // 仅修改这一行即可
};

方案2：使用setInterval实现（更优性能） #

如果需要更简洁的逻辑、避免注册大量定时器，推荐用setInterval实现，同时如果要做普通文字滚动的跑马灯效果，也可以直接把字符追加到同一个容器内，不用每个字符创建p标签：

const frase = "Mi primer programa en JS";
const divMaquee = document.getElementById('marquee');
let charIndex = 0;

const showTimer = setInterval(() => {
  // 所有字符展示完成后清除定时器
  if (charIndex >= frase.length) {
    clearInterval(showTimer);
    return;
  }
  // 如果需要每个字符单独放p标签，就把下面两行替换成创建p、append的逻辑即可
  divMaquee.innerText += frase[charIndex];
  charIndex++;
}, 500);

内容的提问来源于stack exchange，提问作者Martin Abel