將函數調用與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);
}