如何等待使用 setTimeout 递归调用自身的函数完成？

Question

我是 Javascript 新手，目前正在开发一个网站，随着时间的推移它会自行改变外观。

此页面的一部分是“打字机”，它一个字母一个字母地写出一个文本。 这是这台打字机的代码：

function typeWriter(element, txt) {
    if (txt.length > 1) {
        element.textContent += txt.charAt(0);
        var newText = txt.slice(1,txt.length);
        setTimeout(typeWriter, 150 , element, newText);
    } else {
        element.textContent += txt.charAt(0);
    }
}

现在我想等待打字机功能完成其文本，然后再进行另一项更改以假设我的背景颜色。

function runThis(){
    var line1 = document.getElementById("line1");
    typeWriter(line1, "This should be written first, before continuing");
    document.body.style.backgroundColor = "blue";
}

据我了解，setTimeout 使我的打字机异步，所以如果我按照上面的示例执行此操作，则只要打字机达到第一个 setTimeout，第三行代码就会运行。

我试图通过 async/await 条款和承诺来实现这一点。但即使在我解决了承诺之后，我的“runThis”功能在打字机完成后也不会继续。

function typeWriter(element, txt) {
    return new Promise (function(resolve,reject) {
        if (txt.length > 1) {
            element.textContent += txt.charAt(0);
            var newText = txt.slice(1,txt.length);
            setTimeout(typeWriter, 150, element, newText);
        } else {
            element.textContent += txt.charAt(0);
            resolve();
        }
    })
}


async function runThis() {
    var line1 = document.getElementById("line1");
    await typeWriter(line1, "papupa");
    console.log("waiting over")
    document.body.style.backgroundColor = "blue";
}

你能帮我弄清楚这里出了什么问题吗？ 非常感谢

Answer 1

您可以将setTimeout 包装在一个promise 中。这将允许您使用async/await 语法更清楚地表达代码的意图，几乎就像它同步运行一样。

async function runThis() {
  var line1 = document.getElementById("line1");
  await typeWriter(line1, "papupa");
  document.body.style.backgroundColor = "blue";
}

async function typeWriter(element, txt) {
  for (var i = 0; i < txt.length; i++) {
    element.textContent += txt[i]; // this is shorthand for txt.charAt(i)
    await pause();
  }
}

function pause() {
  return new Promise(function(resolve, reject) {
    setTimeout(resolve, 150);
  });
}

Answer 2

您创建了多个 Promise，并且只解决了最后一个 Promise。 您可以将递归函数定义为内部函数，这是一个示例：

function typeWriter(element, text) {
    return new Promise (function(resolve,reject) {
        function recursion(txt) {
            element.textContent += txt.charAt(0);
            if (txt.length > 1) {
                var newText = txt.slice(1, txt.length);
                setTimeout(recursion, 150, newText);
            } else {
                resolve();
            }
        }
        recursion(text);
    });
}

Answer 3

您可以将函数作为另一个参数传递到最后运行。

function typeWriter(element, txt, callback) {
    if (txt.length > 1) {
        element.textContent += txt.charAt(0);
        var newText = txt.slice(1,txt.length);
        setTimeout(typeWriter, 150 , element, newText, cb);
    } else {
        element.textContent += txt.charAt(0);
        callback();
    }
}

typeWriter(el, "ABCDEF", runthis);