以正确的顺序消费事件

Question

我在 Laravel 应用程序中使用推送器的频道。因此，当我从我的控制器触发一个事件时，我的客户端收到了这个事件，并且使用推送器功能，我在我的首页上添加了一些带有此库 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());
    }
}

以正确的顺序消费事件

consume events in the right order

javascript

events

laravel

pusher

pusher-js