js function inside function and wait for return value

Question

$(document).ready(function(){

    // Global function (will be include in any HTML file)
    function m3_result(size_1, size_2, size_3){
        $.get('http://www.google.com', function(data){
            return data;
        });
    }   

    // Another function
    function calculate(){
        var size_1 = parseFloat($('#add_document_form #size_1').val());
        var size_2 = parseFloat($('#add_document_form #size_2').val());
        var size_3 = parseFloat($('#add_document_form #size_3').val());          
        var ax = m3_result(size_1, size_2, size_3);

        alert(ax); // Here ax return: UNDEFINED  
    }

    // Run
    calculate();
});

Results are "undefined", but I would like that calculate() will wait for m3_result() to execute. I see that here problem is coming when I added $.get(), but its needed...

I have searching for callback() like functions, but none fit to my needs, or I just didnt put that right. Any help will be highly appreciated, thanks.

GET url will be localy and element IDs are also ok.

Also you probably will experience a SOP violation if you really are `GET`ting `www.google.com` — Bergi, Jul 26 '13 at 10:45
Please show us how you tried to use a callback function - it is indeed the solution — Bergi, Jul 26 '13 at 10:48
NB: there's no need to reference `#add_document_form` in your selectors. IDs have to be unique, so `#size_1` could only ever refer to one element, so its parent is irrelevant. — Alnitak, Jul 26 '13 at 10:53
@LaurisKuznecovs sure, the element IDs will work - they're just unnecessarily specific, and potentially slower than they would be if you just said `#size_1`. — Alnitak, Jul 26 '13 at 11:01

score 6 · Accepted Answer · answered Jul 26 '13 at 10:46

6

You can't return a result from an asynchronous function, instead you can return a promise to supply that value later, which as it happens is the jqXHR object returned by $.get:

function m3_result() {
     return $.get(...)
}

and do the same in calculate:

function calculate() {
    ...
    return m3_result(...); 
}

and then wait for the result, which will be passed as a parameter to the callback registered with the .done function:

calculate().done(function(result) {
    alert(result);
});

answered Jul 26 '13 at 10:46

Alnitak

334,560
70
407
495

1

Returning the promise is really nice, even if the q is a duplicate I like this technique and used it before (---also, it's not mentioned in the dupe---). – Benjamin Gruenbaum Jul 26 '13 at 10:47
2

@BenjaminGruenbaum It _is_ mentioned in the dupe, but it's hidden away amongst many other possible solutions. I always use this method, though. In any event, I think it's often useful to give the OP a concrete example of how to use the technique for _their_ use case. – Alnitak Jul 26 '13 at 10:48
Cool, never seen this before but looks promising, boom-boom – Stokedout Jul 26 '13 at 10:49
Cool, this way it worked like a charm :) – Lauris Kuznecovs Jul 26 '13 at 11:36
But still one problem: – Lauris Kuznecovs Jul 26 '13 at 12:08
@LaurisKuznecovs and what's that problem? – Alnitak Jul 26 '13 at 12:17
But still one problem: calculate().done(function(result) { alert(result); // return expected alert( $(document).html(); ); // return undefined }); – Lauris Kuznecovs Jul 26 '13 at 12:18
sounds like you're running that code before the DOM has been loaded. – Alnitak Jul 26 '13 at 12:20

js function inside function and wait for return value

1 Answers1