Question

我试图用javascript模拟打字机效果。理论上它应该与我的代码一起使用：

gdb$ x/16wd 0x4025c0
0x4025c0 <array.3160>:  10      2       14      7
0x4025d0 <array.3160+16>:       8       12      15      11
0x4025e0 <array.3160+32>:       0       4       1       13
0x4025f0 <array.3160+48>:       3       9       6       5

应该是这样，当我打电话给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)); } }时，它应该写出＆＃34; test＆＃34;的每一个字符。在＆＃34; p_test＆＃34; HTML。我认为这个问题不在我的代码上，因为当我在不使用TypeWrite("example", "p_test");的情况下调用函数时，它的工作方式与下面的代码类似：

setTimeout

Answer 1

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

最简单的解决方案？只需使用let代替。 let支持function TypeWrite(txt,id){ for (let i = 0; i < txt.length; i++){ setTimeout(function() { TypeWriteToDoc(txt, id, i); }, 1000*(i+1)); } }。

    1       2       3       4       5       6       7       8   
1   1x1=1   
2   1x2=2   2x2=4   
3   1x3=3   2x3=6   3x3=9   
4   1x4=4   2x4=8   3x4=12  4x4=16  
5   1x5=5   2x5=10  3x5=15  4x5=20  5x5=25  
6   1x6=6   2x6=12  3x6=18  4x6=24  5x6=30  6x6=36  
7   1x7=7   2x7=14  3x7=21  4x7=28  5x7=35  6x7=42  7x7=49  
8   1x8=8   2x8=16  3x8=24  4x8=32  5x8=40  6x8=48  7x8=56  8x8=64

Answer 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')

<div id="p_test"></div>

Settimout不在里面工作For循环，表现得很奇怪？

2 个答案: