Javascript synchronous flow when there are asynchronous function call

Question

I spent all day reading about jquery deferred, promise, etc.

My problem is really simple.

I have one function that call 4 other functions, and some of them have async calls to fetch data from the server.

function A() {
    async call
    console.log("1");
}

function B() {
    normal code
    console.log("2");
}

function C() {
    async call
    console.log("3");
}

function xyz() {
    A();
    B();
    C();
    print str;
}

the expected result is 123str.

instead i get 312 or 213. Basically the 3 functions don't wait the end of the other one. I have tried with .done with $.when(a).then(b), with promise.

But nothing work. Can someone give me a barebone example code that works?

EDIT:

function setId() {

var doc = sessionStorage.getItem("urlDoc");
var user = sessionStorage.getItem("LoggedUser");
var string = "urlDoc=" + doc + "&user=" + user;
if (sessionStorage.getItem("countId") === null) {
    $.ajax({
        type: 'POST',
        url: 'php/findTemporaryId.php',
        data: string,
        success: function (data) {
            sessionStorage.setItem("countId", data);
            countId = sessionStorage.getItem("countId");
            id = countId;
            console.log("1");

        },
        error: function () {
            alert("Server Error");
        }
    });
} else {
    sessionStorage.setItem("countId", parseInt(sessionStorage.getItem("countId")) + 1);
    countId = sessionStorage.getItem("countId");
    id = countId;
    console.log("1");

}

then

 function setAuthor() {
    author = sessionStorage.getItem('LoggedUser');
    console.log("2");

 }

then

function getData() {
    $.ajax({
    type: 'POST',
    url: 'php/date.php',
    success: function (data) {
        date = data; 
        console.log("3"); 
    },
    error: function () {
        alert("Error");
    }
});
}

this is how i call them

function saveSelectionFragment() {

        setId();
        setAuthor(); 
        getData();
}

here the firebug console. https://i.stack.imgur.com/lLnGH.jpg

Answer 1

Since you didn't post anything you said you tried with Promises, here's how it works..

function A() {
  return new Promise(function(done) {
    // emulate async call with setTimeout
    setTimeout(function() {
      console.log("1");
      done();
    }, 100);
  });
}

function B() {
  return new Promise(function(done) {
    // "normal" code
    console.log("2");
    done();
  });
}

function C() {
  return new Promise(function(done) {
    // emulate async call with setTimeout
    setTimeout(function() {
      console.log("3");
      done();
    }, 100);
  });
}

function xyz() {
  A()
    .then(B)
    .then(C)
    .then(function() {
      // whatever this is supposed to be
      //print str;
      // maybe you meant..
      console.log('str');
    });
}

xyz();

Answer 2

return the Promise of jQuery promise object from the function. Use .then() to chain promises or functions which return a promise object.

function A() {
  return $.Deferred(function(dfd) {
    setTimeout(function() {
      dfd.resolve("1")
    }, Math.floor(Math.random() * 2500))
  })
  .then(function(result) {
    console.log(result);
    return result
  });
}

function B() {
  var value = "2";
  console.log(value);
  return value
}

function C() {
  return $.Deferred(function(dfd) {
    setTimeout(function() {
      dfd.resolve("3")
    }, Math.floor(Math.random() * 2500))
  })
  .then(function(result) {
    console.log(result);
    return result
  });
}

function xyz(results) {
  return A()
  .then(function(data) {
    results.push(data);
    return B()
  })
  .then(function(data) {
    var value = "3";
    results.push(data);
    return C()
  })
  .then(function(data) {
    var value = "str"; 
    results.push(data, value);
    console.log(value);
    return results
  })  
}

xyz([])
.then(function(results) {
  console.log("complete:", results);
})
.fail(function(err) {
  console.log(err);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

Answer 3

$(".button").click(function(){
  a(function(){
    b(function(){
      c(function(){
        d(function(){
        
        });
      });
    });
   });
});
function a(callback){
  console.log("1");
  callback();
}

function b(callback){
console.log("2");
  callback();
}

function c(callback){
console.log("3");
  callback();
}

function d(callback){
console.log("4");
  callback();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<button class="button" >ClickToCall</button>

Might be you need to try callback with all function. When we need to manage this type of process. i am always use callback to manage complete process. in function a,b,c,d you can put ajax call and on success of ajax you need to pass callback() function.

Let me know if you need more information regarding this

Answer 4

In Chrome and Firefox Developer Edition you can now use async/await. Straight forward:

var wait = ms => new Promise(resolve => setTimeout(resolve, ms));

async function A() {
    await wait(100);
    console.log("1");
}

function B() {
    console.log("2");
}

async function C() {
    await wait(100);
    console.log("3");
}

async function xyz() {
    await A();
    B();
    await C();
    console.log("Done.");
}

xyz();

It's still using promises, but you can hardly tell.