javascript - 使用 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:How should I call 3 functions in order to execute them one after the other?但没有成功。它给出了错误，找不到结果，我无法真正弄清楚。

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)

密码: 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 时创建的第一个 Promise。当您递归调用 print 时，您正在创建新的 Promise，因此，如果您在打印最后一个字母时简单地调用 done ，您只会解析最后一个 Promise。因此，我创建了一个新参数，该函数可以使用该参数递归地将第一个 Promise done 函数传递给过去的 Promise。

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