getting error for using async: false

Question

I need to store some data outside ajax call in a variable. So, I am using async: false option in ajax. But it gives me an error:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

See my code below:

var internal_tags = null;

$.ajax({
    async: false,
    dataType:'json',
    contentType:'application/json',
    url: '/ajax-search-suggestions',
    type: 'GET',
    success: function(data) {
        asignVariable(data);
    }
});

// get internal tags
function asignVariable(data){
    internal_tags = data;
}

I need to save ajax success data into internal_tags variable. If I remove the option async: false, data are not saved in variable. So how I can remove the error or how to save ajax success data in the variable which is outside of ajax.

Not only you should be getting an error, but your keyboard should be taken away for even considering using async: false so that you never ever repeat this mistake again. — Darin Dimitrov
– Darin Dimitrov, Commented Jan 24, 2017 at 7:30
You should pass a callback function to your helper method. Welcome to the AJAX world. This world is asynchronous and the sooner you start thinking in terms of callbacks rather then passing return variables from your functions, the better for you :-) — Darin Dimitrov
– Darin Dimitrov, Commented Jan 24, 2017 at 7:31

Darin Dimitrov · Accepted Answer · 2017-01-24 07:34:21Z

1

You should not use async: true. You should refactor your code so that your functions do not return values but rather take callbacks.

Example of what you should not be doing:

var internal_tags = null;

function getValue() {
    $.ajax({
        async: false,
        dataType:'json',
        contentType:'application/json',
        url: '/ajax-search-suggestions',
        type: 'GET',
        success: function(data) {
            internal_tags = data;
        }
    });
}

And here's the correct approach:

function getValue(callback) {
    $.ajax({
        dataType:'json',
        contentType:'application/json',
        url: '/ajax-search-suggestions',
        type: 'GET',
        success: function(data) {
            callback(data);
        }
    });
}

so instead of:

var internal_tags = null;
getValue();
alert(internal_tags);

you should do this:

getValue(function(internal_tags) {
    alert(internal_tags);
});

I also recommend you looking at jQuery's deferred objects.

answered Jan 24, 2017 at 7:34

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

2 Comments

StreetCoder Over a year ago

thanks for your comment. Problem is, I want to use internal_tags from ajax as parameter of other functions. For example: I am using typeahead jquery library where I want to use the internal_tags as parameter. i.e. source: substringMatcher(internal_tags),

Darin Dimitrov Over a year ago

So you will initialize the typeahead plugin inside the callback and not outside like you are doing it right now. It is only inside this callback that you have the result of the asynchronous call.

Collectives™ on Stack Overflow

getting error for using async: false

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related