Question

所以我已经制作了一个逐字打印文本的功能，如下所示。（我知道我的命名方案不是很好，不要取笑。还要记住我＆＃ 39; m对于编码仍然相当新，所以我的代码可能看起来有些奇怪/低效。）

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

第一次运行时，每隔100毫秒就有一个间隔运行。

第二次运行时，您有两个间隔，每个间隔每100毫秒运行一次。

等等。

由于它们共享相同的变量，因此您只需使每个变量按每100ms一次写入的速度提高输出速度。

或者：

完成后致电clearInterval(...)
将全局变量作为参数传递给talky，以便它们不会在多个间隔之间共享
只需更新变量，而不是再次调用talky

Answer 2

setInterval将使其定义的函数在您的情况下每100毫秒运行一次。如果你像你说的那样多次调用这个函数，会有几个间隔并行运行，这可能不是你想要的。

您可以使用ID clearInterval返回的setInterval来清除现有的时间间隔。

e.g。

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

Javascript setInterval每次运行时都会变短

2 个答案: