Q:

Fila para Exibir Modal Bootstrap

Pessoal alguem me da uma luz. Estou pegando alguns eventos com socket.io e colocando um modal quando recebo, porém eu recebo mt evento e o modal buga estou tentando usar um settimeout mais ainda esta bugado se alguem conseguir me ajudar. segue o codigo:
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)
})

A:

Crie uma array que vai enfileirando as mensagens recebidas e use uma função recursiva que vai exibindo cada item da array até se esgotarem, de forma sequencial definido pelos setTimeout's.
A variável ativo irá determinar quando a função será chamada pelo socket, ou seja, se o processamento da função estiver ativo, o socket não irá chamar a função, mas ficará adicionando as mensagens na array normalmente, enquanto a função as processa com a animação. Uma vez vazia a array, a variável ativo volta a ser false, e caso o socket receba uma nova mensagem, começa o processo novamente.

Para funcionar é preciso remover a classe .fade da modal do
  Bootstrap.

No código abaixo eu converti vários métodos usados para a sintaxe do jQuery e adicionei comentários explicativos:
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)
})

