代码之家  ›  专栏  ›  技术社区  ›  JahStation

按正确顺序使用事件

  •  0
  • JahStation  · 技术社区  · 6 年前

    我在Laravel应用程序中使用了pusher的通道。 所以当我从我的控制器触发一个事件时,它会被接收到我的客户机,并且通过pusher函数,我用这个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) 完成了…所以在屏幕上不显示一次以上的打印…

    1 回复  |  直到 6 年前
        1
  •  1
  •   Jeff    6 年前

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

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