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

So, before Promises you need to learn about scopes and variables. Your `result` variable is really not defined. — dhilt, Jan 15 '18 at 13:55
That's what I want to understand. Where does `result` come from? — Shivam Dhawan, Jan 15 '18 at 13:58

I wrestled a bear once. · Accepted Answer · 2018-01-15T14:26:21.737

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; 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.

Can you please explain a bit about what you did in print(). What exactly is **p** needed for? — Shivam Dhawan, Jan 15 '18 at 14:18
@ShivamDhawan - I've added a slightly more elaborate explanation. — I wrestled a bear once., Jan 15 '18 at 14:26

score 0 · Answer 2 · answered Jan 15 '18 at 13:52

0

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

answered Jan 15 '18 at 13:52

Faly

13,291
2
19
37

Not working. It is showing the output for the second function call. Can you explain a bit what you were trying to do? – Shivam Dhawan Jan 15 '18 at 13:56
@ShivamDhawan I've just rewrote your code to use promise but you have to add in your question the expected output so we can help you more – Faly Jan 15 '18 at 13:58
What I'm trying to do is set text to h1: "WELCOME" one char at a time creating a sort of typewriter feel. And when that's done It will set that text to "Projects". I am able to get the typewriter effect but when I'm running the code It's showing me only output for "Projects". – Shivam Dhawan Jan 15 '18 at 14:01
I have added the codepen also in the description. Hope that'll help make my aim clear – Shivam Dhawan Jan 15 '18 at 14:06
Always strive to properly describe your answers, this lack clarity. – Remario Jan 15 '18 at 14:06
Yes, I felt that. That's why I included the codepen link. – Shivam Dhawan Jan 15 '18 at 14:11

Synchronizing function calls with Promise

2 Answers2