How to get variable from jQuery to function?

Question

But for some reason, when i put variable data into naughty, it does not have content of data.

function cookie() {
    var naughty = 'aaa';
    $.post('/cookie', function(data) {
        naughty = data;
    });
    alert(naughty); // sends "aaa"
}

Why?

UPDATE: thank you! now i got it, its because $.post() is async, so alert(naughty) will be executed before it will be filled with data.

Now i have sub-question: when i turn off async, will only function cookie() postpone execution or whole browser engine will freeze until AJAX is done?

UPDATE 2: Yes, @Kevin B, you are right, naughty is never filled... i did mistake in first code sample. I am lucky that all answers are valid anyway with only second code sample :-)

As @Kevin B pointed out, async=false will be depreciated in jQuery 1.8. And it freezes browser until request is done...

sub-question #2: i have more code inside cookie(), after this AJAX request. So, can i somehow pause execution of cookie() untill AJAX is done, without freezing whole browser with async=false? Or do i have to find new way (using complete/success callback) of coding this idea?

LAST EDIT: I realized that what i want is ASYNC:FALSE... So i simply used it. BTW. ASYNC:FALSE will NOT be removed from jQuery! Only special kind of use-case will be...

because the alert is hitting before your post is finished. alert from within the post complete func and you'll see the dif — SpYk3HH
– SpYk3HH, Commented Aug 7, 2012 at 17:11
The first snippet should be alerting aaa not bbb, are you sure it's aaa? — user400654
– user400654, Commented Aug 7, 2012 at 17:20
To answer your update question, yes. If async is false, the entire function will freeze until the server response comes back. That could lead to problems. Instead, it is probably better practice to handle all of your execution within the processing function. — AceCorban
– AceCorban, Commented Aug 7, 2012 at 17:24

Community · Accepted Answer · 2017-05-23 10:27:02Z

10

It's a race condition. As .post() is an asynchronous function, the alert executes before naughty gets reset to data.

If you want the response to come back before continuing, you can use .ajax and set async to false.

How can I stop $.post in jQuery working asynchronously?

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Aug 7, 2012 at 17:11

AceCorban

2,1131 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user400654 Over a year ago

Add that async:false is depreciated in jQuery 1.8

AceCorban Over a year ago

Oh Kevin, you just broke my heart. I didn't know they were canning it. I like having the synchronous options sometimes. :-(

AceCorban Over a year ago

:-P Thanks paradox. I'm drinking a beer to celebrate tonight.

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Just do this:

function cookie() {
    var naughty = 'aaa';
    $.post('/cookie', function(data) {
        naughty = data;
        callNaughty(naughty);
    });
    
}

function callNaughty(naughty) {
  alert(naughty); 
}

OR

function cookie() {
    var naughty = 'aaa';
    $.post('/cookie').done(function(data) {
        naughty = data;
        alert(naughty)
    });
}

As $.post() is asynchronous, so naughty will update after response arrived.

Note

async: false is deprecated in jQuery 1.8

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 7, 2012 at 17:12

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Comments

codingbiz · Accepted Answer · 2012-08-07 17:13:36Z

1

This is because $.post is asynchronous. Execution leaves that line immediately while page is being requested and function(data) is yet to be called so data is empty. The empty data is what alert picks up. This can only work after the request has completed e.g. in synchronous fashion in which the alert statement has to wait

answered Aug 7, 2012 at 17:13

codingbiz

26.4k9 gold badges62 silver badges99 bronze badges

Comments

Isaac Gonzalez · Accepted Answer · 2012-08-07 17:14:13Z

0

Since $.post it's an ajax request, it's asynchronous by nature, so what you'd want to do it's to make sure that after you ajax request has been completed, then do whatever you want:

function cookie() {
    var naughty ;
    $.post('/cookie', function(data) {
        naughty = data;
    }).done(function(){
        alert(naughty);
    });
}

answered Aug 7, 2012 at 17:14

Isaac Gonzalez

1,7341 gold badge16 silver badges22 bronze badges

Comments

Benjen · Accepted Answer · 2012-08-07 17:18:12Z

0

My guess would be that $.post is working asynchronously. So your alert is being called before the post callback has been executed. If you place the alert in the post callback you should get the correct result.

answered Aug 7, 2012 at 17:18

Benjen

2,9455 gold badges31 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to get variable from jQuery to function?

5 Answers 5

3 Comments

Note

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Note

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related