How to make a javascript function to run after another one get finished?

Question

I'm using Apache Cordova to develop mobile application. the problem is that I want to get mobile phone number and then send it via jQuery get function for authorization. all functions are OK but the function that get mobile phone number is slower than other and it get finished last.

a summary of my code is this :

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    devicePhoneNumber();
    alert("ALERT1"); // ALERT1
};
function devicePhoneNumber() {
    var telephoneNumber = cordova.require("telephonenumber");
    telephoneNumber.get(function (result) {
    alert(result); //ALERT2
    }, function () {
        alert("error");
    });
};

I don't know why first a get ALERT1 and after that i get ALERT2. I want to run my other codes after I get ALERT2.

Any suggestion would be appreciated.

Answer 1

If telephone.get is async, you need to wait for it to finish before you can do your first alert

document.addEventListener("deviceready", onDeviceReady, false);

Write your devicePhoneNumber function to accept a callback done. The callback receives two parameters, err (if present) and result. Regardless of the telephoneNumber.get, the callback will still be called

function devicePhoneNumber(done) {
  var telephoneNumber = cordova.require("telephonenumber");
  telephoneNumber.get(function (result) {
    done(null, result);
  }, function () {
    done(Error("There was an error getting the phone number."));
  });
}

To use the function now, pass function a callback that accepts the two parameters err and result. In your callback, check for the error. If it is present, handle it accordingly. You can access the error's message with err.message.

function onDeviceReady() {
  devicePhoneNumber(function(err, result) {
    if (err) return alert(err.message);
    alert("Alert 1");   // alert 1
    alert(result);      // alert 2
  });
}

Answer 2

add a callback function to your devicePhoneNumber() function:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    devicePhoneNumber(function(){ //anonymous function for the callback parameter
        /* everything you put in here will be executed only AFTER 
        telephoneNumber.get() has run successfully */
        alert("ALERT1"); // ALERT1
    });

};
function devicePhoneNumber(callback) {
    var telephoneNumber = cordova.require("telephonenumber");
    telephoneNumber.get(function (result) {
    alert(result); //ALERT2
    callback(); //callback function is called here
    }, function () {
        alert("error");
    });
};