javascript - 如何调用异步递归函数？

Question

我正在尝试在具有三行不同文本的 div 中输入文本。所以我想为第一行调用函数 typed_text() ，然后为第二行再次调用它，然后为第三行调用它。我尝试使用 Promise，但在使用 setTimeout() 和递归时我迷失了。

我这样称呼这个函数。

typed_text("#line_one", frame.text_one, 0, 25)
        typed_text("#line_two", frame.text_two, 0, 25)
        typed_text("#line_three", frame.text_three, 0, 25)

        function typed_text(div, text, index, interval)
        {
            if (quit_typed_text == true) {
                interval = 0;
            }
            if (index < text.length) {
                $(div).append(text[index++]);
                setTimeout(function() {typed_text(div, text, index, interval); }, interval);
            } else {
                click_disabled = false;
            }

        }

编辑:这是我尝试使用递归和 promise 的内容

    typed_text("#text_one", frame.text_one, 0, 25).then(typed_text("#text_two", frame.text_two, 0, 25));

function typed_text(div, text, index, interval)
{
    return new Promise(function (resolve) {
        if (quit_typed_text == true) {
            interval = 0;
        }
        if (index >= text.length) {
            click_disabled = false;
            resolve();
        }
    }).then(function() {
        if (index < text.length) {
            $(div).append(text[index++]);
            /* Problem is here, setTimeout.then() does not exist as a function */
            setTimeout(function() {typed_text(div, text, index, interval); }, interval);
        }
    });
}

Answer 1

使用 Promise，您的 typed_text 函数可以重写如下

function typed_text(div, text, index, interval) {
    return new Promise(function(resolve) {
        var doit = function() {
            if (quit_typed_text == true) {
                interval = 0;
            }
            if (index < text.length) {
                $(div).append(text[index++]);
                setTimeout(doit, interval);
            } else {
                click_disabled = false; // not sure this should be here
                resolve();
            }
        };
        doit(); // oops forgot this line
    });
}

然后，要使用它，只需使用 promise 链，如下所示:

typed_text("#line_one", frame.text_one, 0, 25).then(function() {
    return typed_text("#line_two", frame.text_two, 0, 25);
}).then(function() {
    return typed_text("#line_three", frame.text_three, 0, 25);
}).then(function() {
    // all done here - perhaps this is where click_disabled = false should be?
});