SettimoutがForループで動作していない、変な動作をしていますか？

Question

私はjavascriptでタイプライターエフェクトをシミュレートしようとしています。 はTheoricallyそれは私のコードで動作するはずです：私が呼ぶとき、それをする必要があります

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で「テスト」の各文字を書く必要があります。

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

Answer 1

これは、forループのコールバック関数とでvarに共通の問題である：私は私がsetTimeoutを使用せずに関数を呼び出す場合は、以下のコードに似ていない私のコードの問題は、それが動作しますので、だと思います。

最も簡単な解決策は？代わりにletを使用してください。 all major browsersにはletのサポートがあります。

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

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>