Handling several .one on same event and element

I have a custom animation framework that uses CSS transitions.

In order to allow for callbacks I attach:

$element.one('webkitTransitionEnd transitionend',function(){
    $element.css({
        '-webkit-transition':'',
        /* And so on... */
     });

    if(callback){
        // This is to make sure that chained events are not fired before the styling is flushed to the DOM, otherwise some animations will not have css transitions
        setTimeout(function(){
            callback(); 
        },0);
    }
});

$element.css({
    '-webkit-transition':'height '+duration+'s ease-out',
    /* And so on... */
    });
$element.css('height',height);

However, some of the same event listeners are fired again and again (yes, it’s actually the same functions with the same guids, I checked). It seems the .one is not properly removing it again.

I’ve tried making a small test-fix with a:

var used = false;

$element.one('webkitTransitionEnd transitionend',function(){
    if(!used){
        used = true;
        /* Rest of function... */
    }
}

and I get several catches using the boolean to keep track if they have been fired, so I keep them from re-firing at least. But I’d like to know why they are re-firing.

Answer

I doubt that both webkitTransitionEnd and transitionend is beeing fired so you would end up with a lot of unused events bound on your elements. I would unbind the event instead of binding using .one:

$element.on('webkitTransitionEnd transitionend', function() {
    $element.off('webkitTransitionEnd transitionend', arguments.callee);
});

Note that the above example doesn’t work when using "use strict". Then you should use:

$element.on('webkitTransitionEnd transitionend', function handler() {
    $element.off('webkitTransitionEnd transitionend', handler);
});

Not sure if it solves your problem. But you could try.

What is:

arguments.callee
"use strict"