将函数调用与Promise同步

Question

我正在尝试同步函数调用，但不想使用回调。 我对这个东西还很陌生，因此请多加解释

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

  print(0,s1);
  print(0,s2);
});

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

我确实尝试过从这里使用Promise： 如何调用3个函数以便一个接一个地执行它们？ 但没有解决。 它给出了一个错误，即未找到结果 ，我无法真正弄清楚。

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

  new Promise(function(fulfill,reject){
    print(0,s1);
    fulfill(result);
  }).then(function(result){
    print(0,s2);
  });

});

这是我从stackoverflow问题和错误中得到的：

Uncaught (in promise) ReferenceError: result is not defined
        at projects.js:8
        at new Promise ()
        at HTMLDocument. (projects.js:6)
        at j (jquery-3.2.1.min.js:2)
        at k (jquery-3.2.1.min.js:2)

CODEPEN： https ：//codepen.io/anon/pen/QaBYQz

Answer 1

 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时创建的第一个承诺。 当您递归调用print您正在创建新的Promise，因此，如果仅在打印最后一个字母时调用done ，则只会解决最后的Promise。 因此，我创建了一个新参数，该函数可用于将第一个promise done函数递归传递给过去的promise。

第一次调用该函数时， p是未定义的，使用p = p || done; p = p || done; 仅当p未定义时，我们才将p的值分配为done 。 因此，到打印整个单词时（即i > st.length ）， p仍将是第一个done功能。 通过调用return p(); 我们解析第一个函数并结束执行。

Answer 2

您可以将其重写为使用promises：

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