如何在再次调用函数之前等待函数停止

Question

我在再次调用它之前试图让我的函数完成时遇到了麻烦。这是我现在的代码:

function TypeAnimation(str, time)
{    
var text = document.getElementById('loading');
for (let i = 0; i < str.length; i++) {
let k = i;
setTimeout(function(){
text.innerHTML += str.charAt(i); 
}, time * (k + 1));
}
}
function StartGame()
{
TypeAnimation('first line of text', 50)
TypeAnimation('next line of text but slower', 100)
}
window.onload = StartGame;

当我这样做的时候，我得到的输出是finrset xlitne的文本，但慢.

我用下面的代码尝试了承诺:

function TypeAnimation(str, time)
{    
return new Promise((resolve) => {
var text = document.getElementById('loading');
for (let i = 0; i < str.length; i++) {
let k = i;
setTimeout(function(){
text.innerHTML += str.charAt(i); 
}, time * (k + 1));
}
resolve();
});
}
function StartGame()
{
TypeAnimation('first line of text', 50).then(TypeAnimation('next line of text but slower', 100))
}
window.onload = StartGame;

但是当我这样做时，我仍然得到相同的结果

在此之上，我也尝试了同样的事情，但与不同的StartGame()

async function StartGame()
{
await TypeAnimation('first line of text', 50)
TypeAnimation('next line of text but slower', 100)
}

再次出现相同的问题，我得到相同的输出

如果有帮助的话，这些都是用一个electron js应用程序创建的。

Answer 1

你的代码不起作用，因为你在超时发生之前就解决了承诺

这样的方法将使它更容易

async function TypeAnimation(str, time) {
const text = document.getElementById('loading');
for (let i = 0; i < str.length; i++) {
text.innerHTML += str.charAt(i);
await wait(time)
}
}
async function StartGame() {
await TypeAnimation('first line of text', 50)
await TypeAnimation('next line of text but slower', 100)
}
StartGame()
function wait(time) {
return new Promise(r => setTimeout(r, time))
}

<span id="loading"></span>