我在 Laravel 应用程序中使用推送器的 channel 。 因此,当我从我的 Controller 触发一个事件时,我的客户端会收到该事件,并且通过推送器功能,我使用此库添加一些文本 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)
完成......所以屏幕上没有显示多于一次的打印时间...
最佳答案
您必须设置某种队列,以确保它们在前一个队列完成之前不会触发。此代码未经测试,但应该可以解决问题:
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());
}
}
关于javascript - 按正确的顺序消费事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52611135/