jQuery 事件触发；与动画相关的回调和计时

Question

也许我的问题本身并不简单： 鉴于我 .trigger() 一个事件，我如何确保代码遵循所述 .trigger( ) 在整个事件处理函数完成之前不会执行，包括所有动画、延迟等？

---

我希望我在这里遗漏了一些东西；我正在设置一个带有一堆自定义事件的用户界面。有些事件实际上只是其他事件的聚合；有些事件实际上只是其他事件的聚合。例如：

// ...
'cb-ui.hide': function(event){
    // do stuff to hide
},
'cb-ui.close': function(event){
    $(this).trigger('cb-ui.hide');
    // more stuff for close
},
// ...

假设 cb-ui.hide 事件中有一个动画，如 .fadeOut(1500)，它会出现（在我的测试中) 剩余的 // more stuff for close 不会等待触发事件中的动画完成。我在想（在引用文档之前）.trigger() 可能有一个可选的回调参数，就像动画方法一样：

$(this).trigger('cb-ui.hide', function(event){
    // more stuff for close
});

但这似乎不是案件。由于事件触发器没有阻塞（或者至少看起来没有），我可以做什么来强制实现所需的功能，同时保持我一直在构建的事件处理程序/触发器实现关掉？

---

更具体地说：

$('[data-cb-ui-class="window"]').live({
    'cb-ui.hide': function(event){
        $(this).find('[data-cb-ui-class="content"]').animate({
            opacity: 0
        }, 1000);
    },
    'cb-ui.show': function(event){
        $(this).find('[data-cb-ui-class="content"]').animate({
            opacity: 1
        }, 1000);
    }
    'cb-ui.close': function(event){
        $(this).trigger('cb-ui.hide');
        $(this).find('[data-cb-ui-class="content"]').animate({
            height: 'hide' // happening simultaneously to the animation of 'cb-ui.hide'
                           // expected to happen in tandem; one after the other
        }, 1000);
    },
    'cb-ui.update': function(event, html){
        // none of this is working as expected; the expected being, the 'cb-ui.hide'
        // event is triggered (thus fading the [...-content] out) the HTML content is
        // updated, then the [...-content] is faded back in from 'cb-ui.show'
        // instead its just a mess that results in it fading out
        $(this).trigger('cb-ui.hide');
        $(this).find('[data-cb-ui-class="content"]').html(html);
        $(this).trigger('cb-ui-show');
    }
});

$('#foo').trigger('cb-ui.update', ['<p>Hello world!</p>']); // #foo is bound

这个示例动画应该需要大约 2 秒，但似乎只需要 1 秒；两个动画同时发生，而不是按逻辑顺序发生。

Answer 1

不确定我是否理解你的问题，但这有意义吗？

您可以传递另一个要在动画完成后运行的函数。

'cb-ui.hide': function(event, callback){
    $('.lol').fadeTo(0,function() {
        // fire callback
    })
},
'cb-ui.close': function(event){
    cb-ui.hide(e,function() {
        // other stuff
    });
},