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

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

，你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 
    }); 
} 

然后被改写，使用它，只需使用承诺链接如下：

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? 
}); 

Answer 2

似乎有在你的代码中没有异步函数，那么你为什么不打电话给你的函数“typed_text”在setTimeOut？

例如：

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; 
} 

难道这是你合适吗？使用承诺