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 специально разработана для анимации и представляет собой объект scope , что означает, что глобальная очередь анимации не предоставлена ​​для удовлетворения ваших требований.

Поскольку вы всегда создаете совершенно новый элемент .msg-div в методе $.plugin.show, все эти 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 */
            );
        }
    );

Вы должны просто добавить параметр callback к своему методу $.plugin.show и выполнить все функции анимации, используя метод flow.exec, предоставив this в качестве параметра callback при вызове метода $.plugin.show.

Answer 2

В вашей функции плагина вам не хватает '

$.plugin= {
    show: function(str){
        var tmp = '<div class="msg-box">'+str.text+'</div>';

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

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

Отредактируйте также на свой плагин. Покажите, у вас слишком много запятых

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