Can I bind something else than 'this' for a function?

Question

I need to pass outside variable to jQuery Ajax's success-function. My ajax is in a loop like so:

var props = ['a', 'b', 'c'];

var results = 
{
    a: null,
    b: null,
    c: null
};

for(var key in props)
{
    var prop = props[key];

    $.ajax(
    {
        url: 'someurl',

        data:
        {
            somedata: 'somevalue'
        },

        success: function(data, status, xhr)
        {
            // This here does not work properly, because the prop's value changes
            // Due to promise stuff
            results[prop] = data;  
        }
    });
}

I need to stuff the data returned in success in to the correct place, but the implementation above does not work because the value of prop changes before the success is called.

I found out that I can "bypass" this problem by binding the success-function's this with the prop like so:

success: function(data, status, xhr)
{
    results[this] = data;  
}.bind(prop)

But this does not seem like a very good idea and besides, I can only bind one variable, not multiple if need be.

This does not seem to work either:

success: function(data, status, xhr)
{
    var privprop = prop;
    results[privprop] = data;  
}

So basically what is the best way to give each success callback a "private" variable, which value is what the value of prop was when the whole ajax was made? Can I somehow bind multiple variables and overwrite something else than this?

score 6 · Accepted Answer · answered Nov 19 '15 at 13:39

6

Try to limit the scope of every prop variable for a specific ajax by doing something like this:

for(var key in props)
{
    var prop = props[key];

    (function(prop){


        $.ajax(
        {
            url: 'someurl',

            data:
            {
                somedata: 'somevalue'
            },

            success: function(data, status, xhr)
            {
                // This here does not work properly, because the prop's value changes
                // Due to promise stuff
                results[prop] = data;  
            }
        });
    })(prop);
}

answered Nov 19 '15 at 13:39

void

36,090
8
62
107

Beat me to it, http://jsfiddle.net/nyq01ysk/. – Rory McCrossan Nov 19 '15 at 13:39
Yeah.. @RoryMcCrossan – void Nov 19 '15 at 13:40
1

Can you talk about: What's the technique name you are using: `(function(prop){..........})(prop)` – Nov 19 '15 at 13:45
1

@Mr.Wolf It is called Immediately-invoked Function Expression (IIFE): https://en.wikipedia.org/wiki/Immediately-invoked_function_expression – Swiffy Nov 19 '15 at 13:47
@Void Thank you. I forgot I could use IIFE for that (: – Swiffy Nov 19 '15 at 13:48
@void By the way, is the bind/apply method I was using a horrible mistake? Is it ok to use it if I only need to pass a sigle variable like in my example? – Swiffy Nov 19 '15 at 13:49
OOfcourse you can do that but in your code prop inside the bind will be out of scope. So no good to use it. – void Nov 19 '15 at 13:51

Can I bind something else than 'this' for a function?

1 Answers1