使用Promise同步函数调用

var h1 = $('#title>h1');
$(window).ready(function() {
  var s1 = "WELCOME.";
  var s2 = "Projects";
  print(0, s1).then(()=>print(0, s2));;
});

function print(i, st, p) {
  return new Promise(done => {
    p = p || done;
    if(i > st.length) return p();
    setTimeout(function() {
      h1.text(st.substr(0, i));
      print(i + 1, st, p);
    }, 250);
  });
}

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

您需要解决呼叫时创建的第一个承诺 print 这是第一次。当你打电话的时候 打印 递归地,你在创造新的承诺,所以如果你只是打电话 done 当最后一封信打印出来时,你只会做出最后的承诺。因此,我创建了一个新参数,函数可以使用该参数递归地传递第一个承诺 完成 履行过去的承诺。

第一次调用函数时, p 未定义,使用 p = p || done; 我们正在分配 p 到 完成 只有 如果 p 未定义。所以当整个单词打印出来时(即, i > st.length ) p 还是第一个 完成 作用通过调用 return p(); 我们解析第一个函数并结束执行。

您可以重写它以使用承诺:

var h1 = $('#title>h1');

function onReady() {
  return new Promise(function(resolve) {
    $(window).ready(function(){
      var s1 = "WELCOME.";
      var s2= "Projects";
      resolve([s1, s2]);
    });
  });
}

onReady().then(function(res) {
  print(0, res[0]);
  print(0, res[1]);
});


function print(i,st){
  setTimeout(function(){
    h1.text(st.substr(0,i));
    if(i<8){
      print(i+1,st);
    }
  },250);
}