javascript - 如何防止回调多次触发？

Question

我在这里看到了几个与此相关的问题(包括使用when/promise解决方案)，但它们似乎不起作用。基本上，我一次对多个元素进行动画处理，并在回调内部调用一个函数，但该函数被多次调用 - 对于每个动画元素......这是我的代码:

OBJCollection.css({
    'width': '0em',
    'height': '0em'
}).animate({
    'width': Screens.ImageW / 16 + 'em',
    'height': Screens.ImageH / 16 + 'em'
}, {
    duration: Screens.currentImageParent.data('LightboxFadeSpeedIn'),
    queue: false,
    step: function (now, fx) {
        componentScaler();
    },
    complete: function () {
        $Content.show('fade', Screens.currentImageParent.data('ContentFadeSpeedIn'));
        //calling function here
    }
});

我尝试过:

if (!OBJCollection.is(':animated')) { ... call function }

这不起作用。我还尝试了使用when 的解决方案，但这似乎放弃了我的函数调用(它根据 OBJCollection 的最终动画大小定位其他元素)。我不确定(因为这是我第一次使用when/promise)，但是它是否在第一个项目完成动画并忽略所有其他项目后触发回调一次？看起来这就是它正在做的事情，但我正在寻找一种解决方案，当所有项目完成动画处理时触发回调......

有什么想法吗？

Answer 1

使用 Promise 对象。

OBJCollection.css({
    'width': '0em',
    'height': '0em'
}).animate({
    'width': Screens.ImageW / 16 + 'em',
    'height': Screens.ImageH / 16 + 'em'
}, {
    duration: Screens.currentImageParent.data('LightboxFadeSpeedIn'),
    queue: false,
    step: function(now, fx) {
        componentScaler();
    }
}).promise().done(function() {
    $Content.show('fade', Screens.currentImageParent.data('ContentFadeSpeedIn'));
    //calling function here
});​