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
}

我在整個代碼中多次調用此函數，將對話框設置為我要打印的任何內容，然后調用該函數。 這一切都很好，但每次我運行它，似乎字母打印得越來越快。 我不確定發生了什么，或者如何解決它。 我在谷歌上做了一些搜索，但沒有任何有用的信息。

Answer 1

第一次運行它時，每100ms運行一個間隔。

第二次運行它時，你有兩個間隔，每個間隔每100ms運行一次。

等等。

由於它們共享相同的變量，因此您只需使每個變量以每100ms一次寫入的速度提高輸出速度。

---

或者：

• 完成后調用clearInterval(...)
• 將全局變量作為參數傳遞給talky這樣它們就不會在多個區間之間共享
• 只需更新變量，而不是再次調用talky

Answer 2

setInterval將讓它定義的函數在你的情況下每100ms運行一次。 如果你像你說的那樣多次調用這個函數，會有幾個間隔並行運行，這可能不是你想要的。

您可以使用clearInterval以及setInterval返回的id清除現有間隔。

例如

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