javascript - Snap SVG .animate 回调立即触发

Question

我正在尝试将一组参数传递给 Snap SVG 中的动画函数，包括回调函数。但是，回调(在本例中是删除元素)会在单击时立即触发，而不是在动画完成后触发。就像现在一样，该元素被删除，然后 animate 函数出错，因为该元素不再存在。有什么想法吗？

    var theCallback = theApp.destroyAnElement("#"+ theParentID); 

//The function call
theAnimationFunctions.animateSingleSVGElementWithSnap('.stopped','#svg-container',{transform: 's1,0'}, 500, mina.backin, 0,0,theCallback);

// The animate function
    animateSingleSVGElementWithSnap: function(element, parentSVG, animationValues, duration, easing, initialDelay, callback) {
       var s = Snap.select("#"+ parentSVG),
           theElement = s.select(element);

       setTimeout(function() {
         theElement.stop().animate(animationValues, duration, easing, function() {
             callback;
         });
      }, initialDelay);
    }

更新

theCallback = function () { theApp.destroyAnElement("#"+ theElementID); };

theAnimationFunctions.animateSingleSVGElementWithSnap('.stopped','#svg-container',{transform: 's1,0'}, 500, mina.backin, 0,0,theCallback);

theAnimationFunctions = {
    animateSingleSVGElementWithSnap: function(element, parentSVG, animationValues, duration, easing, initialDelay, callback) {
    var s = Snap.select("#"+ parentSVG),
    theElement = s.select(element);

    setTimeout(function() {
       theElement.stop().animate(animationValues, duration, easing, function() {
            callback();
       });
    }, initialDelay);
}

通过上述更新，我现在在动画完成时收到错误消息:

"Uncaught TypeError: callback is not a function"

Answer 1

您必须将回调包装在匿名函数中以防止它立即触发:

var theCallback = function () { theApp.destroyAnElement("#"+ theParentID); };

然后将其作为函数调用:

theElement.stop().animate(animationValues, duration, easing, function() {
         theCallback(); // <-- notice the parenthesis
     });