javascript - jQuery:让事件在彼此之后运行(队列)

Question

我正在寻找一种方法来防止事件同时运行，因此它们必须以正确的顺序运行，因此必须完成之前的事件。我已经看到您可以为此使用 jQuery 队列，但我似乎无法让它工作。

该示例是占位符想法中的简单“显示消息”(他们必须等待对方完成)。

我在示例代码中使用了 2 个链接，但还有更多。这是想法/代码的一个小例子。

    $('.link-1').click(function(e){

        $.plugin.show({
             text: 'Quisque porta purus et odio vulputate ornare. Suspendisse dui dui.',
             time: 1000
        });
    });

    $('.link-2').click(function(e){

        $.plugin.show({
             text: 'Etiam non augue nec felis consectetur sodales a.',
             time: 4000
        });
    });


    // public functions
    $.plugin= {
        show: function(str){

            var tmp = '<div class="msg-box">'+str.text+'</div>';

            $('#msg-div').prepend(tmp);

            $('.msg-box').fadeIn(str.time, function(){
                $(this).delay(str.time).fadeOut(str.time, function(){
                     $(this).remove();
                }):
            });
        } 
    }  

Answer 1

jQuery的队列是专门为动画设计的，是一个元素作用域对象，也就是说没有提供全局动画队列来满足你的需求。

因为你总是在 $.plugin.show 方法中创建一个全新的 .msg-div 元素，所有这些消息 div 都不是同一个元素，所以你不能重复使用相同的动画队列。

根据您的要求，Flow-JS可能是更好的选择，包括它并像这样编写代码:

    $.plugin = {
        show: function(str, callback /* 1. add an callback argument */) {
            var tmp = '<div class="msg-box">' + str.text + '</div>';

            $('body').prepend(tmp);

            $('.msg-box').fadeIn(
                str.time, 
                function() {
                    $(this).delay(str.time).fadeOut(
                        str.time, 
                        function() {
                            $(this).remove();
                            callback(); /* 2. run callback here */
                        }
                    );
                }
            );
        }
    };

    flow.exec(
        function() {
            $.plugin.show(
                { text: 'abc', time: 4000 },
                this /* 3. provide this as callback parameter to $.plugin.show */
            );
        },
        function() {
            $.plugin.show(
                { text: 'xyz', time: 1000 },
                this /* 3. provide this as callback parameter to $.plugin.show */
            );
        }
    );

您应该简单地向您的$.plugin.show 方法添加一个callback 参数，并使用flow.exec 方法执行所有动画功能, 在调用 $.plugin.show 方法时提供 this 作为 callback 参数。