Javascript setIntervalが実行されるたびに短くなっています

Question

私は以下のように文字で文字をプリントアウトする関数を作っています（私の命名体系はあまり面白くないのが分かります。私は

）。まだ

var text = document.getElementById("gametext") 
var dialog = "the entire text you want to print out" 
var talk = "The whole text gets added here, letter by letter" 
var charinc = 0 

function talky() { 
    setInterval(function(){ 
    if(charinc < dialog.length){ 
    talk = dialog.charAt(charinc++); 
    text.innerHTML += talk; 
    } 
    }, 100); 
    charinc = 0 
} 

ので、私のコードは、非効率的な/少し奇妙に思えるかもしれないコーディングにかなり新しいだと私は私が印刷したいされているものにダイアログを設定し、私のコード全体に数回この関数を呼び出すと、その関数を呼び出します。そして、最初はうまくいきますが、それを実行するたびに、手紙が素早く素早く印刷されるようです。私は実際に何が起こっているのか、それをどう修正するのかは分かりません。私はGoogleでいくつかの検索を行ってきましたが、有用なものはありませんでした。

Answer 1

最初に実行すると、100msごとに1つの間隔が実行されます。

2回目の実行では、2つの間隔があり、それぞれ100msごとに実行されます。

など。

これらは同じ変数を共有しているため、出力速度を100msごとに1回ずつ増加させるだけです。

---

次のいずれかをあなたが

はそう、彼らは複数の間隔の間で共有されていないtalkyへの引数としてグローバル変数を渡し終えた

• コールclearInterval(...)
• だけで変数を更新talkyを再度呼び出す代わりに

Answer 2

setIntervalは、それによって定義された関数をあなたのケースで100msごとに実行させます。あなたが言うようにこの関数を何度か呼び出すと、互いに平行に走る複数の区間があります。これはおそらくあなたが望むものではありません。

clearIntervalを使用して、IDがsetIntervalの場合、既存の間隔をクリアすることができます。

var intervalId = setInterval(function() { console.log('hello, world!') }, 100); clearInterval(intervalId);