Queue to View Modal Bootstrap

Question

Guys, somebody give me a light. I’m taking some events with socket.io and putting a modal when I receive, but I get mt event and the modal Uga I’m trying to use a settimeout even more this buggy if someone can help me. follows the code:

var statusFollow = 'on',
countevent = 0,
eventended = 0
socket.on('msg', (msg) => {
    $('.last-follow').find('div').html(msg)
    countevent++
    setTimeout(() => {
        $('.modal-body').html(msg+' É um novo seguidor')
        $('.modal').modal('show')
        setTimeout(()=>{
            document.querySelector('.modal').classList.remove('animated', 'slideInDown')
            setTimeout(()=>{
                document.querySelector('.modal').classList.add('animated', 'slideOutUp')
                document.querySelector('.modal').addEventListener('animationend', () => {
                    document.querySelector('.modal').removeEventListener('animationend', () => {})
                    $('.modal').modal('hide')
                    document.querySelector('.modal').classList.remove('animated', 'slideOutUp')
                    document.querySelector('.modal').classList.add('animated', 'slideInDown')
                })
                countevent--
            }, 2000)
        }, 3000)
    }, countevent * 5000)

    console.log('Eventos Restantes: '+(countevent - eventended))

    statusFollow = 'on'


    console.log(msg)
})

Answer 1

Create an array that queues incoming messages and use a recursive function that displays each item of the array until they run out, sequentially defined by setTimeout’s.

The variable ativo will determine when the function will be called by the socket, ie if the function processing is active, the socket will not call the function, but will be adding the messages in the array normally, while the function processes them with animation. Once empty the array, the variable ativo reverts false, and if the socket receives a new message, it starts the process again.

To work you need to remove the class .fade of the modal of Bootstrap.

In the code below I converted several methods used for jQuery syntax and added explanatory comments:

function mOdal(){
   // altera a variável para impedir o socket de chamar a função
   // enquanto estiver em processamento, evitando atropelos
   ativo = true;
   var mod = $('.modal'); // atribui a modal à uma variável
   var msg = lista[0]; // pega a primeira mensagem da array
   $('.last-follow').find('div').html(msg); // exibe a mensagem na div
   $('.modal-body').html(msg+' É um novo seguidor'); // insere texto no body da modal
   mod.modal('show'); // ativa a modal
   setTimeout(() => {
     mod.removeClass('animated slideInDown') // remove as classes
      setTimeout(()=>{
         mod
         .addClass('animated slideOutUp') // adiciona as classes
         .on('animationend', function(){ // evento quando a animação terminar
            $(this)
            .off('animationend') // cancela o evento
            .removeClass('animated slideOutUp') // remove as classes
            .addClass('animated slideInDown') // adiciona as classes
            .modal('hide') // esconde a modal
            lista.shift(); // remove o primeiro item da array
            console.log('Eventos Restantes: '+lista.length)
            if(lista.length){
               mOdal() // se ainda houver item na array, chama a função novamente
            }else{
               ativo = false // array vazia, volta a variável para false
            }
         })

      }, 2000)

   }, 3000)

}

var statusFollow = 'on',
lista = [],
ativo
socket.on('msg', (msg) => {
    lista.push(msg); // adiciona a mensagem na array
    if(!ativo) mOdal() // se a variável for false, chama a função
    statusFollow = 'on'
    console.log(msg)
})