Javascript 等待上一个异步函数完成

我在我的项目中添加了一个函数，可以输出字符之间有一个超时的句子，效果很好。问题是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 msg=[
“1 Lorem ipsum Laboris Duis cupidatat ut id enim nisi”，
“2 Lorem ipsum Laboris Duis cupidata ut id enim nisi”，
“3.我们的劳动是由我们自己创造的”，
“4 Lorem ipsum Laboris Duis cupidatat ut id enim nisi”
];
var printMsg=函数（索引、回调）{
如果（msg.length>index）{//如果尚未加载所有消息。
var out=$（'#out'）。追加（''）；
var charIndex=0；
var interval=setInterval（函数（）{
out.children（':last child'）.append（msg[index][charIndex++]）；
如果（charIndex>=msg[index].length）{
间隔时间；
//解决（）；
printMsg（++index，callback）；//增加索引并传递相同的回调
//递归函数调用。
}
}, 150);
}否则{
callback（）；//所有消息都已加载
}
}
//通过传递第一个消息索引触发连锁反应
printMsg（0，函数（）{
警报（'所有消息都被打印！！并且也是同步的'）；
});
使用递归函数将是最佳选择。使用此函数，您将可以更好地控制执行。因为您只能在当前函数完成后使用下面的代码执行下一个函数


var msg=[
“1 Lorem ipsum Laboris Duis cupidatat ut id enim nisi”，
“2 Lorem ipsum Laboris Duis cupidata ut id enim nisi”，
“3.我们的劳动是由我们自己创造的”，
“4 Lorem ipsum Laboris Duis cupidatat ut id enim nisi”
];
var printMsg=函数（索引、回调）{
如果（msg.length>index）{//如果尚未加载所有消息。
var out=$（'#out'）。追加（''）；
var charIndex=0；
var interval=setInterval（函数（）{
out.children（':last child'）.append（msg[index][charIndex++]）；
如果（charIndex>=msg[index].length）{
间隔时间；
//解决（）；
printMsg（++index，callback）；//增加索引并传递相同的回调
//递归函数调用。
}
}, 150);
}否则{
callback（）；//所有消息都已加载
}
}
//通过传递第一个消息索引触发连锁反应
printMsg（0，函数（）{
警报（'所有消息都被打印！！并且也是同步的'）；
});
使用本机ES6承诺和链接的工作示例：

var printMsg=函数（msg）{
var承诺=新承诺（功能（解决、拒绝）{
var指数=0；
var out=$（'#out'）。追加（''）；
var msgOut=setInterval（函数（）{
out.children（':last child'）.append（msg[index++]）；
如果（索引>=消息长度）{
净间隔（msgOut）；
解决（）；
};
}, 150);
});
回报承诺；
}
函数printMessages（消息）{
if（messages.length）{
printMsg（消息[0]）
.然后（函数（）{
printMessages（messages.slice（1，messages.length））
});
}
}
变量消息=[
“这是第一句话。”，
“这是另一句话。”，
“我们可以整天都这样做……”
];
打印消息（消息）；

如果您选择这样的方式，您可能希望使用jQuery承诺或至少使用polyfill:
使用本机ES6承诺和链接的工作示例：

var printMsg=函数（msg）{
var承诺=新承诺（功能（解决、拒绝）{
var指数=0；
var out=$（'#out'）。追加（''）；
var msgOut=setInterval（函数（）{
out.children（':last child'）.append（msg[index++]）；
如果（索引>=消息长度）{
净间隔（msgOut）；
解决（）；
};
}, 150);
});
回报承诺；
}
函数printMessages（消息）{
if（messages.length）{
printMsg（消息[0]）
.然后（函数（）{
printMessages（messages.slice（1，messages.length））
});
}
}
变量消息=[
“这是第一句话。”，
“这是另一句话。”，
“我们可以整天都这样做……”
];
打印消息（消息）；

如果您选择这样的方式，您可能希望使用jQuery promises或至少使用polyfill:
是什么阻止了您使用回调？是什么阻止了您使用回调？谢谢，但我需要它来打印每个字符，并且在它们之间有一个超时。您可以将超时放在printMsg中，对吗？？比如将完整的逻辑包装到interval@Intern检查我的最新答案。。每次消息打印之间有2秒的延迟。这是每个句子之间的超时，而不是每个字符之间的超时。参见示例@dannyjolie@Intern好的，我误读了OP，检查我新编辑的解决方案。谢谢，但我需要它来打印每个字符，它们之间有一个超时。你可以将超时放在printMsg中，对吗？？比如将完整的逻辑包装到interval@Intern检查我的最新答案。。每次消息打印之间有2秒的延迟。这是每个句子之间的超时，而不是每个字符之间的超时。参见示例@dannyjolie@Intern好吧，我误读了OP，检查我新编辑的解决方案。
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);

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