scope of var in jquery function?

Question

Possible Duplicate:
What does Asynchronous means in Ajax?

why my var "temp" is 0 after the ajax?

function calc7() {
            var temp = 0;
            $.ajax({
                type: "POST",
                url: 'Helpers/CalcResult7.ashx',
                data: { GU_ID: '<%=Request.QueryString["GUID"] %>' },
                success: function (data) {
                    list1 = eval(data);
                    temp = parseFloat(myJSONObject.bindings[0].value);
                    $("#<%=ProResult7.GetSpanId %>").text(addCommas(temp));
                }
            });
            return temp;
        }

Pretty sure there is an option to force the call to be synchronous and then it work as expected.... but probably not as intended. — asawyer, Jul 24 '12 at 14:36
Why do you ask about the scope of your variable? There's nothing wrong with it - not so with the value of the variable. — Bergi, Jul 24 '12 at 14:50

score 0 · Answer 1 · answered Jul 24 '12 at 14:33

0

Because the ajax call is asynchronous, so temp is returned before being updated ...

answered Jul 24 '12 at 14:33

yent

1,303
1
8
10

score 0 · Answer 2 · answered Jul 24 '12 at 14:33

Because the success function doesn't run until the HTTP response is comes back from the server.

Ajax is asynchronous.

Do what you want to do with the data in the success function (or in functions you call from it).

Don't try to wait for a response and then return data to a calling function.

score 0 · Answer 3 · answered Jul 24 '12 at 14:40

0

Ajax calls are asynchronous but you can use CommonJS Promises/A pattern to achieve what you want. jQuery provides it's own implementation of it: jQuery.Deferred().

answered Jul 24 '12 at 14:40

Florent

12,310
10
49
58

score 0 · Answer 4 · answered Jul 24 '12 at 14:46

As others have mentioned here, because ajax is asynchronous, you're not guaranteed to get the updated temp variable before your return statement. It would be best to work within your success function. However, if you absolutely have to wait for that call to finish and return the temp variable, you can make it Non-asynchronous by adding async: false

function calc7() {
        var temp = 0;
        $.ajax({
            type: "POST",
            url: 'Helpers/CalcResult7.ashx',
            data: { GU_ID: '<%=Request.QueryString["GUID"] %>' },
            async: false,
            success: function (data) {
                list1 = eval(data);
                temp = parseFloat(myJSONObject.bindings[0].value);
                $("#<%=ProResult7.GetSpanId %>").text(addCommas(temp));
            }
        });
        return temp;
    }

score 0 · Answer 5 · answered Jul 24 '12 at 14:59

S.ajax/$.post/$.get etc etc, all these are asynchronous process (which means, you will come out of the loop even before $.ajax is completed, even though it will be going to server side after coming out of the loop)

function calc7() {
            var temp = 0;
            $.ajax({
                type: "POST",
                .............
                  ..............
                }
            });
            return temp;
        }

So just after the loop if you will check, the following statement might not have executed(depending upon the data set). temp = parseFloat(myJSONObject.bindings[0].value);

so to check the data in temp variable you should put a debugger/alert inside $.ajax. example :

function calc7() {
            var temp = 0;
            $.ajax({
                type: "POST",
                url: 'Helpers/CalcResult7.ashx',
                data: { GU_ID: '<%=Request.QueryString["GUID"] %>' },
                success: function (data) {
                    list1 = eval(data);
                    temp = parseFloat(myJSONObject.bindings[0].value);
alert(temp);
                    $("#<%=ProResult7.GetSpanId %>").text(addCommas(temp));
                }
            });
            return temp;
        }

now you will get the value of temp

scope of var in jquery function?

5 Answers5