Question

也许我的问题偏离了它本身的简单性： 鉴于我.trigger()一个事件，我怎样才能确保在.trigger()之后的代码不会执行，直到整个事件处理函数已经完成，包括所有动画，延迟等等吗？

我希望我在这里遗漏一些东西;我正在设置一个包含大量自定义事件的UI。有些事件实际上只是其他事件的集合;例如：

// ...
'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
    });
},

jQuery事件触发器;关于动画的回调和时间安排

1 个答案: