Javascript 以正确的顺序使用事件

我在一个Laravel应用程序中使用推进器的通道。 因此，当我从我的控制器触发一个事件时，它将被接收到我的客户端，并使用pusher函数在我的首页上添加一些带有此库的文本：

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() ;
        }

    });

channel.bind（'App\\Events\\TextAdded'，函数（数据）{
如果（data.txt）{
打印短语（data.txt）；
i++；
}
});
函数打印短语（txt）{
$('')
.addClass（'txt_'+i）
.appendTo（“.typest_dialog”）
.打字员({
文本：txt，
速度:15,，
}).on（'end_type.typer'，function（）{
console.log（'end'）；
}).typeststop（）；
}
});

如您所见，我可以捕获事件“end_type”（当函数停止写入时）

---

问题是我不能——或者我不知道如何——将“channel.bind”放在队列上，所以等待直到

printphase（txt）

完成。。。因此，在屏幕上一次不显示多个打印…

您必须设置某种队列，以确保在前一个打印完成之前不会触发。此代码未经测试，但应执行以下操作：

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());
    }
}

var printQueue=[]；
var queueWorking=false；
channel.bind（'App\\Events\\TextAdded'，函数（数据）{
如果（data.txt）{
push（data.txt）；
工作队列（）；
}
});
函数打印短语（txt）{
i++；
$('')
.addClass（'txt_'+i）
.appendTo（“.typest_dialog”）
.打字员({
文本：txt，
速度:15,，
}).on（'end_type.typer'，function（）{
queueWorking=false；
工作队列（）；
}).typeststop（）；
}
函数workQueue（）{
if（printQueue.length&&！queueWorking）{
queueWorking=true；
printphase（printQueue.shift（））；
}
}

很好的解决方法！我会尽快尝试，我会让你知道…我想知道是否有更多的功能直接从推js api。。。