kinetic JS onFinish hide node array

Question

I have code that creates an object array in a layer as shown below:

    var labels = layer.get('Label');
    var labelCount = labelLeft.length;

    var tweens = [];
    var tweenCounter = 1;

    var duration=5;
    for(var i=0; i<labelCount; i++)
    {
        var tween = new Kinetic.Tween({
            node: labelLeft[i],
            duration: animspeed[i],
            x: 0,
            onFinish: function() {
                if (tweenCounter !== labelCount) { //Prevent an undefined tween from being played at the end
                    tweens[tweenCounter].play();
                    tweenCounter++;
                }
            }
        });
        tweens.push(tween);
    }
    tweens[0].play();

The problem is that I want to hide the object once done scrolling to left using onFinish. I tried using labelLeft[i].hide()

onFinish: function() {
            labelLeft[i].hide();
            if (tweenCounter !== labelCount) { //Prevent an undefined tween from being played at the end
                tweens[tweenCounter].play();
                tweenCounter++;
            }
        }

But this triggers TypeError: labelLeft[i] is undefined Any ideas? Please help. Thanks

score 0 · Answer 1 · answered Nov 28 '13 at 08:05

0

Try to debug your code and check of i is defined.
I think its not because you are in a for loop and execute the code when the loop has finished. You easily can solve this problem with a anonymous function to induce a scope.

for(var i=0; i<labelCount; i++)
{
    (function(i){
    //put code here
    }(i))
}

answered Nov 28 '13 at 08:05

A1rPun

16,287
7
57
90

`i` is defined, but labelLeft[i] is not because `i` is most probably one-off when onFinish is called. This is closure problem. – Anto Jurković Nov 28 '13 at 08:10
Thanks for this, let me try it and inform you if will work :) – Rhod Dec 03 '13 at 00:02

score 0 · Accepted Answer · answered Nov 28 '13 at 08:23

0

It seems as closure problem. Could you try this, I am not sure if it will work but anyway:

for(var i=0; i<labelCount; i++)
{
    var label = labelLeft[i];
    var tween = new Kinetic.Tween({
        node: labelLeft[i],
        duration: animspeed[i],
        x: 0,
        onFinish: function(l) {
            return function()
                hide(l);
        }(label)
    });
    tweens.push(tween);
}

function hide(label) {
    labelLeft[label].hide();
    if (tweenCounter !== labelCount) { //Prevent an undefined tween from being played at the end
        tweens[tweenCounter].play();
        tweenCounter++;
    }
}

answered Nov 28 '13 at 08:23

Anto Jurković

11,188
2
29
42

1

`return function() hide(l);` probably generates a error. I know what you are trying to do but it is very close to my solution. Both will work because they create a closure. – A1rPun Nov 28 '13 at 08:40
1

@A1rPun: honestly, I am not sure if my _solution_ will work. closures are stil my dark area – Anto Jurković Nov 28 '13 at 08:45
1

They shouldn't be! [Check this SO page](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) ;) – A1rPun Nov 28 '13 at 09:24
Thanks for this, let me try it and inform you if this will work :) – Rhod Dec 03 '13 at 00:03
wow!!! your a genius, it worked, I just have to change labelLeft[label].hide(); to label.hide(); in the function. Thanks I greatly appreciate your help – Rhod Dec 04 '13 at 04:46

kinetic JS onFinish hide node array

2 Answers2