如何在彼此之後調用異步遞歸函數？

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

難道這是你合適嗎？使用承諾