如何从“one”事件获取回调

Question

我正在构建一个javascript应用程序，有时需要进行触发器单击。调用触发器，应用程序等待一次动画结束，然后运行几行代码。但是脚本不会等到动画结束，而是继续执行其他代码。

这个问题很难描述，所以下面是我的代码：

var $output = $('#output');

$('#link-1').click(function(){
    $('#link-2').trigger('click');
    $output.append('<div>Second output</div>');
});

$('#link-2').click(function(){
    var $obj = $(this);
    $obj.toggleClass('active');

    $obj.one('transitionend', function(){
        $output.append('<div>First output</div>');
    });
});

结果如下所示：

<div id="output">
    <div>Second output</div>
    <div>First output</div>
</div>

你可以在这里尝试一下：http://jsfiddle.net/MKZvZ/1/

如何实现在Second output之前出现First output

First output和Second output只是一些基本示例，实际上应用程序完成了一些逻辑工作。

Answer 1

您可以使用setTimeout函数来延迟进程

window.setTimeout(function() {
        // this will execute 1 second later
    }, 1000);

请参考下面的链接。在这里，他们可以解释如何延迟执行。您可以延迟执行，直到动画结束。

http://stackoverflow.com/questions/4912655/javascript-how-to-put-a-simple-delay-in-between-execution-of-javascript-code

Answer 2

这不是一个优雅的解决方案，但尽管如此

http://jsfiddle.net/MKZvZ/2/

var $output = $('#output');

$('#link-1').click(function(){    
    var func = function(){
        $output.append('<div>Second output</div>');
    }
    $('#link-2').trigger('click',func);
});

$('#link-2').click(function(event,func){
    var $obj = $(this);
    $obj.toggleClass('active');

    $obj.one('transitionend', function(){
        $output.append('<div>First output</div>');
        func.call();
    });

});