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

问题描述：

我正在使用试图在具有三种不同文本行的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); 
     } 
    }); 
}

'我试图用promises' - 没有按看起来不像它 –

我没有发布我的代码使用承诺，因为我不知道我在哪里与递归。如果不是递归，我认为解决方案会起作用。如果这能帮上忙，我可以分享我所拥有的。 – Chris

答

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

看起来很有前途，谢谢！虽然我在'doit'上遇到麻烦。它似乎没有调用该函数，即我把console.log（'进入'）作为函数的第一行，它似乎永远不会被调用。 – Chris

是的，我省略了一行！第一次打电话给'doit'：p –

作品很有魅力，非常感谢！ – Chris

答

似乎有在你的代码中没有异步函数，那么你为什么不打电话给你的函数“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; 
}

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

感谢您的意见。不幸的是，对于你的解决方案，我失去了递归调用以打字方式输出文本到div。我希望用户能够看到第一次按字符输入的字符，然后第二行将逐个字符地输入，全部使用相同的超时间隔25.我目前正在尝试类似的东西，但是看看我能否做到这一点工作。 – Chris

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

相关推荐