потреблять события в правильном порядке

Question

Я использую каналы толкателя в приложении Laravel.Поэтому, когда я запустил событие от моего контроллера, оно получено моему клиенту, и с помощью функции толкателя я добавляю текст с этой библиотекой lib https://github.com/albburtsev/jquery.typist на первой странице:

channel.bind('App\\Events\\TextAdded', function(data) {
            if(data.txt){
                printPhrase(data.txt);
                i++;
            }
        });
        function printPhrase(txt) {
            $('<span>')
                    .addClass('txt_' + i)
                    .appendTo('.typist_dialog')
                    .typist({
                        text:txt,
                        speed: 15,

                    }).on('end_type.typist', function() {
console.log('end')    ;
            }).typistStop() ;
        }

    });

Как выможно увидеть, что я могу поймать событие "end_type" (когда функция перестает писать).

Проблема в том, что я не могу - или я понятия не имею, как поставить "channel.bind" в очередь, и такожидание до тех пор, пока printPhrase(txt) не закончится ... поэтому на экране не будет отображаться более одной печати ...

Answer 1

Вам нужно будет установить какую-то очередь, чтобы убедиться, что они не срабатывают, пока не будет завершена предыдущая.Этот код не проверен, но должен выполнить свою задачу:

var printQueue = [];
var queueWorking = false;

channel.bind('App\\Events\\TextAdded', function(data) {
    if(data.txt){
        printQueue.push(data.txt);
        workQueue();
    }
});

function printPhrase(txt) {
    i++;
    $('<span>')
        .addClass('txt_' + i)
        .appendTo('.typist_dialog')
        .typist({
            text:txt,
            speed: 15,
        }).on('end_type.typist', function() {
            queueWorking = false;
            workQueue();
        }).typistStop() ;
    }

function workQueue(){
    if(printQueue.length && !queueWorking){
        queueWorking = true;
        printPhrase(printQueue.shift());
    }
}