Settimeout 在 For 循环中不起作用，表现得很奇怪？答案

【问题标题】：Settimout not working inside For loop, acting weird?Settimeout 在 For 循环中不起作用，表现得很奇怪？
【发布时间】：2017-10-28 17:49:22
【问题描述】：

我正在尝试使用 javascript 模拟打字机效果。理论上它应该适用于我的代码：

function TypeWriteToDoc(txt, id, x){
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + txt.charAt(x);
}

function TypeWrite(txt,id){
for (var i = 0; i < txt.length; i++){
  setTimeout(function() {
    TypeWriteToDoc(txt, id, i);
    }, 1000*(i+1));
  }
}

应该是这样，当我调用TypeWrite("example", "p_test"); 时，它应该在“p_test”html 中写入“test”的每个字符。我认为问题不在我的代码上，因为当我在不使用 setTimeout 的情况下调用该函数时，它的工作原理类似于下面的代码：

function TypeWriteWithNoSettimeout(txt, id){
for (var i = 0; i < txt.lenght; i++){
  TypeWriteToDoc(txt, id, i);}
}

【问题讨论】：

有什么问题？你好像是说你的代码不行，但是你没有说什么问题。
它根本不起作用。上面带有“setTimeout”的代码什么都不做。

标签： javascript loops for-loop settimeout

【解决方案1】：

这是带有回调函数的 for 循环中 var 的常见问题。

最简单的解决方案？只需使用 let 代替。 let 在all major browsers 中有支持。

function TypeWrite(txt,id){
for (let i = 0; i < txt.length; i++){
  setTimeout(function() {
    TypeWriteToDoc(txt, id, i);
    }, 1000*(i+1));
  }
}

【讨论】：

【解决方案2】：

与之前的响应类似，但我没有将原始文本与 div.innerHtml 一起附加，而是将其调整为只是模拟打字机感觉的文本字符。为了增加延迟，我将索引乘以 1000 而不是添加它，因为更大的增量更明显。

function TypeWriteToDoc(txt, id, i) {
  setTimeout(function() {
    var div = document.getElementById(id)
    div.innerHTML +=txt.charAt(i)
  }, 1000 * (i))
 }

function TypeWrite(txt,id){
  for (var i = 0; i < txt.length; i++) {
    TypeWriteToDoc(txt, id, i)
  }
 }
 
TypeWrite('example', 'p_test')

&lt;div id="p_test"&gt;&lt;/div&gt;

【讨论】：