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

Я использую канал толкателя в приложении 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.info('end')    ;
            }).typistStop() ;
        }

    });

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

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

javascript laravel events pusher pusher-js

02.10.2018 17:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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());
    }
}

отличное решение! я попробую это как можно скорее и я дам вам знать ... мне интересно, есть ли еще какая-то функция прямо из pusher js api ...

— 02.10.2018 17:23

02.10.2018 17:12