Question

我正在尝试在包含三行不同文本的div中输入文本。所以我想为第一行调用函数typed_text（），然后再次为第二行调用它，然后再调用第三行。我试图使用promises，但是在使用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;
            }

        }

编辑：这是我尝试使用递归和承诺

    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

您的代码中似乎没有异步函数，那么为什么不在setTimeOut中调用函数“typed_text”？

以示例：

setTimeout(function() { typed_text("#line_one", frame.text_one, 0); }, 25);
setTimeout(function() { typed_text("#line_two", frame.text_two, 0); }, 50);
setTimeout(function() { typed_text("#line_three", frame.text_three, 0); }, 75);


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

这对你好吗？

Answer 2

使用promises，你的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?
});

如何在彼此之后调用异步递归函数？

2 个答案: