时间戳

首页 > 解决方案 > 如何在javascript中等待递归方法调用

javascript - 如何在javascript中等待递归方法调用

问题描述

我正在尝试等待 javascript 中的递归方法调用。这是我启动递归方法的代码：

(async function start() {
    await writeText(htmlEditor, 0, time, '#editor');
    await writeText(fileSystem, 0, time, '#fileSystem');
    await console.log("Hello World");
}).call(this);

这是递归方法：

function writeText(message, index, interval, to) {
    return new Promise(resolve => {
        let pre;
        if (index < message.length) {
            pre = document.getElementById('editor');
            pre.scrollTop = pre.scrollHeight;
            writeChar(message[index++], to);
            setTimeout( function () {
                writeText(message, index, interval, to);
            }, time);
        }
    })

}

但是，当我使用这段代码时，会同时调用 start 函数中的所有方法。我怀疑这是因为 writeText 函数中的递归调用。

如何等待整个递归堆栈完成？

标签： javascriptasync-await

解决方案

您的writeText函数不会做任何工作来让消费者了解执行实际完成的时间。setTimeout用于在这里执行一种“即发即弃”类型的执行。

尝试让它返回一个在工作实际完成时解决的承诺：

function writeText(message, index, interval, to) {

    let pre;
    if (index < message.length) {
        pre = document.getElementById('editor');
        pre.scrollTop = pre.scrollHeight;
        writeChar(message[index++], to);
        // wrap the setTimeout in a promise and proxy the result of the recursive call
        return new Promise((resolve, reject) => {
            setTimeout( function () {
                writeText(message, index, interval, to).then(resolve, reject);
            }, time);
        });
    }
    // "base case" I guess, return undefined
    return Promise.resolve();
}

推荐阅读