javascript - 如何从“一个”事件中获取回调

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/

我怎样才能实现First output之前出现的Second 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();
    });

});