等待先前的异步功能完成[重复]

Question

我在我的项目中添加了一个函数，可以输出字符之间有超时的句子，效果很好。问题是JS执行了所有异步函数调用，而我希望它等待上一句完成后再开始下一句。

我希望这是一个可链接的 jQuery 函数，最终可以与 .delay 一起使用。我有很多句子要打印，所以嵌套回调会很乏味。

我尝试了很多方法，但最接近的方法是调用函数，每个方法之间都有延迟，当我必须为函数计时完成时，这会很烦人。

这是最新的

var printMsg = function(msg) {
  var index = 0;
  var out = $('#out').append('<pre></pre>');
  var msgOut = setInterval(function() {
    out.children(':last-child').append(msg[index++]);
    if (index >= msg.length) {
      clearInterval(msgOut);
    };
  }, 150);
}

那我得这样称呼他们

var timeout = 8000;
printMsg('Lorem ipsum Laboris Duis cupidatat ut id enim nisi');
setTimeout(function() {
  printMsg('Lorem ipsum Laboris Duis cupidatat ut id enim nisi');
}, timeout);
timeout += 8000;
setTimeout(function() {
  printMsg('Lorem ipsum Laboris Duis cupidatat ut id enim nisi');
}, timeout);

Fiddle

Answer 1

使用原生 ES6 Promise 和链接的工作示例：https://jsfiddle.net/5hro5zq1/

var printMsg = function(msg) {
  var promise = new Promise(function(resolve, reject){
    var index = 0;
    var out = $('#out').append('<pre></pre>');
    var msgOut = setInterval(function() {
      out.children(':last-child').append(msg[index++]);
      if (index >= msg.length) {
        clearInterval(msgOut);
        resolve();
      };
    }, 150);
  });
  return promise;
}

function printMessages(messages){
  if(messages.length){
    printMsg(messages[0])
      .then(function(){
        printMessages(messages.slice(1, messages.length))
      });
  }
}

var messages = [
  'This is the first sentence.',
  'This is another sentence.',
  'We can do this all day long...'
];

printMessages(messages);

如果你喜欢这样的东西，你可能想要使用 jQuery 承诺或至少使用 polyfill：https://github.com/stefanpenner/es6-promise

Answer 2

使用 递归函数 将是最佳选择。您将可以更好地控制执行。因为您只能在使用下面的代码完成当前功能后执行下一个功能。

var msg = [
  '1 Lorem ipsum Laboris Duis cupidatat ut id enim nisi',
  '2 Lorem ipsum Laboris Duis cupidatat ut id enim nisi',
  '3 Lorem ipsum Laboris Duis cupidatat ut id enim nisi',
  '4 Lorem ipsum Laboris Duis cupidatat ut id enim nisi'
];

var printMsg = function(index, callback) {

  if (msg.length > index) { // if all messages are not yet loaded.
    var out = $('#out').append('<pre></pre>');
    var charIndex = 0;
    var interval = setInterval(function() {
      out.children(':last-child').append(msg[index][charIndex++]);
      if (charIndex >= msg[index].length) {
        clearInterval(interval);
        // resolve();
        printMsg(++index, callback); //increment the index and pass the same callback
        //Recursive function call.
      }
    }, 150);
  } else {
    callback(); // all the messages are loaded
  }

}

//trigger the chain reaction by passing the first message index
printMsg(0, function() {
  alert('all the messages are printed!! and Synchronously too');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="out">
  <div>

注意：回调在上述解决方案中没有用。它仅用于在加载消息时传入自定义函数，如果在多个地方使用函数printMsg，这将是最好的方法。否则，您可能必须将逻辑放在 printMsg 的 else 部分。