Unwanted variable behaviour when combining .each() with $.ajax

Question

I have a function similar to the following (simplified here for brevity)

$('.somelement').each(function(){

    var me = $(this)

    var mydata = me.data('somedata')

    $.ajax({url:"phpfile.php?data=" + mydata}).done(function(returnedhtml){

        console.log(mydata)

    });

});

Each element with class .someelement has a different value for somedata.

When I look at the ajax call in firebug I see a different mydata passed to the php file.

But the console.log(mydata) is logging the same value each time (i.e. not always the value passed into the url in the ajax function)

I realize this may be caused by the asynchronous nature of the ajax call but even so, it seems 'buggy' to not be picking up the right mydata through the flow of code. I tried adding async:false to the ajax call, and the problem goes away, but I get a warning that async:false is deprecated in the global thingy whatchamagig.

Is there a simple and correct way to do what I'm trying to do (retain variable consistency inside and outside of the $.ajax call inside each each() loop.

Answer 1

You can use self-invoking functions (IIFE)

var mydata = me.data('somedata')
(function(data){
    $.ajax({"phpfile.php?data=" + mydata})
        .done(function(returnedhtml){
            console.log(data);          
        });
})(mydata);