Synchronizing function calls with Promise

Question

I'm trying to synchronize function calls but don't want to use callbacks. I'm still pretty new to this stuff so a little explanation is appreciated

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

I did try using Promise from here: How should I call 3 functions in order to execute them one after the other? but didn't work out. It gave error that result was not found and I couldn't really figure it out.

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

});

This is what I got from the stackoverflow question and error that I got was:

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> 

You need to resolve the first promise that is created when you call print for the first time. When you call print recursively you're creating new promises, so if you simply call done when the last letter is printed you would only be resolving the last promise. So I created a new parameter that the function can use to recursively pass the first promises done function to the past promise.

The first time the function is called, p is undefined, using p = p || done; p = p || done; we are assigning the value of p to done only if p is undefined. So by the time the whole word is printed (ie, i > st.length ) p will still be the very first done function. By calling return p(); we resolve the first function and end execution.

Answer 2

You can rewrite it to use 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);
}