Run code after function completes and get returned value

Question

Imagine i have a simple javascript function:

  function someFunction(integer)
  {
    data = integer + 1;
    return data;
  }

I need to call this from inside another function and use the returned value:

  function anotherFunction(integer)
  {
    int_plus_one = someFunction(integer);
    //Do something with the returned data...
    int_plus_two = int_plus_one + 1;
    return int_plus_two;
  }

How can i ensure that the return of anotherFunction return is only returned after someFunction completes? It actually seems to work ok with very fast functions like these. However if someFunction has to do some ajax lookups, the return of aotherFunction fails.

Thanks, Steve

You can't return an asynchronous operation. You would have to make your async call, then do whatever you had to do with the data you received in the callback. — Daniel Lizik, Sep 24 '15 at 12:56
Thanks Daniel_L - how do i do that with the example? I think i need to use a call back - but i can't seem to figure out how to do that and still use the return from someFunction? — user8262, Sep 24 '15 at 12:59

score 3 · Accepted Answer · answered Sep 24 '15 at 13:00

3

You do not know when or even if an asynchronous function will complete. The only way to handle this is to use a callback function, a function that gets executed after the async operation has completed.

This was my "aha!" moment: How to return the response from an asynchronous call?

answered Sep 24 '15 at 13:00

jds

7,910
11
63
101

Thank you for the pointer gwg - excellent article that explained what i needed to do. Code now working as required! – user8262 Sep 24 '15 at 13:37

score 0 · Answer 2 · answered Sep 24 '15 at 13:03

As far as your code is sync, the approach above is fine.

Once you start introducing async parts, the one below involving callbacks is a common used approach:

function fn (v, cb) {
    doSomethingAsyncWithV(function (err, _v) {
        if(err) return cb(err);
        cb(null, _v);
    })
}

function yourFirstFn () {
    var v = 0;
    fn(v, function (err, _v) {
        // do here whatever you want with the asynchronously computed value
    });
}

score 0 · Answer 3 · answered Sep 24 '15 at 13:07

How about promise? With that in mind, there's no need to worry about callback. It's one of the cool things in AngularJS.

var q = require('q');

var myPromise =function() {
    var deferred = q.defer();
    setTimeout(function(){  
        var output = anotherFunction(1);
        deferred.resolve(output)
    }, 10000);  // take times to compute!!! 
    return deferred.promise;
}

var objPromise = myPromise();
objPromise.then(function(outputVal){
    console.log(outputVal) ; // your output value from anotherFunction
}).catch(function(reason) {
    console.log('Error: ' + reason);
})

then is ONLY exeucted after promise has been resolved. If an exception or error is caught, the catch function executes.

Please don't use deferred object as it is (rightly) considered anti-pattern https://github.com/petkaantonov/bluebird/wiki/Promise-anti-patterns — laruiss, Sep 24 '15 at 13:16
This isn't wrong per se, but I think jumping from "I don't know how to use async functions" to "use AngularJS promises" is a big leap. — jds, Sep 24 '15 at 13:30

score 0 · Answer 4 · answered Sep 24 '15 at 13:09

0

how about this?

   function someFunction(integer, callback)
   {
       data = integer + 1;
       return callback(data);
   }



  function anotherFunction(integer)
  {
     int_plus_one = someFunction(integer, function(data){
         int_plus_two = int_plus_one + 1;
         return int_plus_two;
     });
    //Do something with the returned data...

  }

answered Sep 24 '15 at 13:09

Andy Stannard

1,673
2
18
32

1

There are no async functions in this example. – jds Sep 24 '15 at 13:10

score 0 · Answer 5 · answered Sep 24 '15 at 13:10

You could use promises:

new Promise(function someFunction(resolve, reject) {
    ajaxLib.get(url, options, function (data) {
        resolve(data);
    });
}).then(function anotherFunction(integer)
  {
    int_plus_one = integer;
    //Do something with the returned data...
    int_plus_two = int_plus_one + 1;
    return int_plus_two;
});

If you use jQuery, $.ajax returns a thenable :

$.ajax(url, options).then(function processDataFromXHR(data) {
     return data.integer;
}).then(function anotherFunction(integer){
    int_plus_one = integer;
    //Do something with the returned data...
    int_plus_two = int_plus_one + 1;
    return int_plus_two;
});

Run code after function completes and get returned value

5 Answers5