Question

我有一个使用css过渡的自定义动画框架。

为了允许我附加回调

$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);

但是，一些相同的事件监听器会一次又一次地被触发（是的，它实际上是具有相同guid的相同函数，我检查过）。似乎.one没有正确删除它。

我尝试用

进行小型测试

var used = false;

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

我使用布尔值获得了几次捕获以跟踪它们是否被触发，所以我让它们至少不会重新开始。但我想知道为什么他们会重新开始。

Answer 1

我怀疑webkitTransitionEnd和transitionend都被解雇了，所以你最终会在你的元素上绑定很多未使用的事件。我会取消绑定事件，而不是使用.one绑定：

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

请注意，使用"use strict"时上述示例无效。然后你应该使用：

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

不确定它是否解决了您的问题。但你可以试试。

什么是：

arguments.callee
"use strict"

处理同一事件和元素上的几个.one

1 个答案:

什么是：