多次在javascript中执行自定义打字功能时出现问题

我正在尝试用HTML、CSS和JS制作一个包含打字动画的游戏。 我想要一个自定义函数，调用该函数时，可以键入一些文本。但是，多次使用该函数时会出现问题。该函数组合输入的不同字符串中的文本。在函数中。请帮我找到解决办法。我的代码与W3学校示例代码类似，只是做了一些更改

var-txt，速度，i；
功能打字机（）{
如果（i
html{
背景色：#0a1c08；
颜色：#ffffff；
字体大小：20px；
}

命运的游戏

正如第一条评论所说，setTimeout不会阻塞，下一次写入将立即执行。为了防止这种行为，您需要以某种方式阻止执行。一种方法是在超时函数中使用回调，另一种方法是等待承诺。这是一个很好的解释

为了解决这个问题，我使用了一个自定义的sleep函数，只要输入动画继续，它就会阻止执行。它并不完美，可能需要更多的改进，但它可以工作


var速度；
功能打字机（i，txt）{
如果（i打字机（i，txt），速度）；
}
}
异步函数睡眠（ms）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
};
异步函数包装器（）{
让word=“你好”；
速度=100；
等待打字机（0，word）；
等待睡眠（字长*速度）；
word=“世界”；
速度=200；
等待打字机（0，word）；
}
包装器（）
html{
背景色：#0a1c08；
颜色：#ffffff；
字体大小：20px；
}

命运的游戏

setTimeout
不会阻塞，在第一次
写入
打印第一个字符后，将立即执行下一次
写入
。然后，
i
将重置为
0
，并且只有第二次调用
write
才能正确执行

这可以通过使用承诺来解决，或者简单地通过链接单词来输入
write
函数来解决，如下所示：


var txt=''，
i=0，
pad=document.getElementById（'text'），
速度
功能打字机（）{
如果（i
html{
背景色：#0a1c08；
颜色：#ffffff；
字体大小：20px；
}
谢谢您的代码！它工作得非常好，正是我想要的。我不知道setTimeout的属性。