javascript - pause executing function on purpose

Question

I have a simple .click() function with some functions in it:

$mario.on('click', this, function() {

    var width_mario  = $window.width()/2;
    $contentw.animate({left: '100%', marginLeft: -width_mario, marginTop: 0}, 600);
    $fixed.css({'background-color': '#510000', 'left': '25%'});
    createMario();
    trigger(); // fire trigger not until createMario() is finished with animation
});

inside the function of createMario() are loads of jQuery .animate()ions. What I intend to do is, to fire trigger not until the animations of createMario()are finished. Something like the return function you can do if an animation is finished BUT inside the click function.

Thanks

edit: and not with setTimeout() because the animations have a random speed.

Answer 1

你不能从字面上做到这一点。相反，您需要做的是将对该trigger函数的引用传递给 createMario并让它在动画完成时调用该函数。假设动画是通过 jQuery 实现的，它们在完成时会调用一个回调。

Answer 2

element.promise.done(function() { trigger(); });如果您正在为函数中的 1 个元素设置动画，您也可以使用createMario，或者您也可以将其附加到最长的动画元素（完成时间最长的元素），它会trigger()在该元素完成动画后调用该函数。

这是我放在一起的一个 jsFiddle 来说明这一点：http: //jsfiddle.net/WPHmY/2/

Answer 3

将其作为回调传递，如下所示：

function createMario(calback_fn) {
    ...
    animate({...}, {duration: 12345, complete: callback_fn});
    ...
}

确保将其添加到最长的animate通话中。请注意，可能需要稍微更改动画语法，请参阅http://api.jquery.com/animate/了解不同的参数选项）。

然后做：

...
$fixed.css({'background-color': ... as before... });
createMario(trigger);