使用setTimeout()向div逐字符追加字符串时空格丢失问题求助

你遇到的空格丢失问题，核心原因是innerText会遵循浏览器的文本渲染规则，自动处理空格（包括合并连续空格、忽略多余空格等），而textContent会严格保留字符串里的所有原始字符，包括单个空格。

只需要把代码里的innerText替换成textContent即可解决问题，修改后的完整代码如下：

function animate(){
  for(let i=0; i<cipher.length; i++){
       setTimeout(()=>{
         ciphered.textContent += cipher.charAt(i)
       }, i*30)
  }
}

另外，你用let声明循环变量i的写法是正确的，这样每个setTimeout的回调函数都能捕获到当前循环的正确索引值，不会出现闭包导致的索引错位问题。

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