Pass dynamic parameters to callback function in a loop

Question

I wanted to set some jQuery animatios dynamically.

The code:

function anim(data) {
    for (index in data) {
        (function(){
            var props = {};
            props[data[index].property] = data[index].value;
            data[index].elem.animate(
                props,
                500,
                function() {
                    data[index].callback();
                }
            );
        })();
    }
}

var data =[
    {
        elem: elem1,
        property: 'prop1',
        value: 'val1',
        callback: function() {
            console.log('callback1');
        }
    },
    {
        elem: elem2,
        property: 'prop2',
        value: 'val2',
        callback: function() {
            console.log('callback2');
        }
    },
];
anim(data);

The problem is binding callbacks. When the callback is fired, data[index] is not available in current scope. Can somebody tell me how to set those callback propery?

why do you need a closure of IIFE? You can remove it to check or just pass the index there as suggested in the answer below. — Jai
– Jai, Commented Jan 12, 2017 at 9:44

Mihai Alexandru-Ionut · Accepted Answer · 2017-01-12 09:47:36Z

4

Here you used a closure of Immediately-invoked function expression. You have to pass data[index] as parameter.

(function(dindex){
        var props = {};
        props[dindex.property] = dindex.value;
        dindex.elem.animate(
            props,
            500,
            function() {
                dindex.callback();
            }
        );
 })(data[index]);

edited Jan 12, 2017 at 9:47

answered Jan 12, 2017 at 9:41

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

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

Comments

Mihai Alexandru-Ionut · Accepted Answer · 2017-01-12 09:59:44Z

2

You can try like this as an alternative,

function anim(data) {
    $.each(data, function(x,y){
         var props = {};
         props[y.property] =y.value;
         y.elem.animate(
             props,
             500,
             function() {
                    y.callback();
             }
         );
    });


}

edited Jan 12, 2017 at 9:59

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

answered Jan 12, 2017 at 9:46

Rahul

18.6k7 gold badges43 silver badges64 bronze badges

2 Comments

Mihai Alexandru-Ionut Over a year ago

Simply method. +1.

Rahul Over a year ago

Thank you ! @Alexandru-IonutMihai

Collectives™ on Stack Overflow

Pass dynamic parameters to callback function in a loop

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related