Duvida com setInterval | Front-end

Fala ai pessoal, mais uma semana de estudos.

Estou desenvolvendo um projeto para ficar mais fixo ainda o modelo MVC bem como fixar vários conceitos do js. Dessa vez estou fazendo um projeto de dia das mães. https://codepen.io/pedrobslisboa/full/aGmQaZ/

Acontece que eu to enfrentando um problema, gostaria que sempre que a mensagem da mãe fosse carregada o 'load' aparecesse antes. Caso você que está lendo esta msg tentar utilizar o projeto ele vai rodar e vai mostrar, em um dos casos, o load. Mas somente quando a mãe for a primeira a falar. Como está no código. Eu restringi o código a ter apenas um caso e assim vocês possam entender como ele deveria funcionar, assim sempre que tentar rodar o codigo ele mostrará o load e depois as msgs.

Aqui está o codigo para mostrar uma nova mensagem:

function clickMessage(){

  newMessage.removeEventListener('click', clickMessage);

// aqui está com apenas 1 pois como eu disse, restringi para ser de facil entendimento o que eu estou tentando fazer.

  var randomNumber = Math.floor(Math.random() * 1);

// Aqui no validQuote é apenas para validar posteriormente se um quote já foi usando. Nada que precise ser observado agora.
    validQuote.push(randomNumber);

    var pos = 0;
    var quote = quotes[randomNumber];
    var quoteLength = quote.length;

// aqui eu mostro o load caso a primeira mensagem seja da mae.
    if(quote[pos].classe == 'mom'){ 
        messageShow.appendChild(loading);      
      }

    setInterval(function(){
      if(pos == quoteLength - 1){
        newMessage.addEventListener('click', clickMessage);
      }
      controller.add(quote[pos].message,quote[pos].classe);
      pos++;
    },2000);
}

Bem, esse foi o meu modo de resolver e mostrar as mensagem, mas como disse, gostaria que toda vez que a mensagem fosse da mãe mostrasse o load.

EDIT: Esqueci de falar que em certos momentos terei mais de uma mensagem da mãe, fazendo com que o load tenha que ser chamado de novo. E em alguns momentos a mensagem do filho virá primeiro e isso acontecendo não mostra o load quando a mensagem da mãe for aparecer. Não consigo fazer isso com o setInterval :/

Aqui está o array das mensagens para demonstrar como estou fazendo:

let quotes = [
      [{message:'Good morning! Could you clean your room? It looks like a cyclone ran through it.', 
    classe:'mom'},
    {message:'Ok, mom',
    classe:'sun'}],
];

Agradeço a todos que ajudarem :)

Abraços

Bem, acabou que eu acabei resolvendo o problema, vou deixar aqui, vai que alguém ganha algo com isso hahahaha

Bem, primeiro, o projeto simula um app de mensagens na qual deve ser mostrado uma serie de mensagens de mae e filho. Então para ficar legal achei que deveria ter um feedback de que a mae está escrevendo. Já sabia que ao usar um View que atualizasse somente com as mensagens, sempre que o 'load' (feedback de que a mae está escrevendo). Então eu poderia adicionar o load e sempre que o view fosse atualizado o load sumiria.

Aí está o codigo:


function clickMessage(){

//removo o Evento para evitar que a pessoa fique clicando chamando varias mensagens.

  newMessage.removeEventListener('click', clickMessage);

// Está com 2 quotes então o random é somente para 2.
  var randomNumber = Math.floor(Math.random() * 2);


  if(validQuote.length == quotes[randomNumber].length){

  } else{

// aqui é para evitar que apareça uma msg igual, estragaria o clima

    while(validQuote.includes(randomNumber)){
      randomNumber = Math.floor(Math.random() * 2);
    }
    validQuote.push(randomNumber);
    var pos = 0;
    var quote = quotes[randomNumber];
    var quoteLength = quote.length;

// aqui a magica acontece:
  function addQuote(){
    setTimeout(function(){

    if(pos == quote.length - 1){
      newMessage.addEventListener('click', clickMessage);
    }
    controller.add(quote[pos].message,quote[pos].classe);
    pos++;
    validMomOrSun();
    },quote[pos].time);   
  }
  function validMomOrSun(){   
    if(quote[pos].classe == 'mom'){
        setTimeout(function(){
          messageShow.appendChild(loading);  
          addQuote();
         },1000);            
    } else {    
          addQuote();  
    }
  }

  validMomOrSun();
  }



}

Usei o seguinte código que valida se é mãe ou não no qual eu usei um funçao 'callback', que existe no Jquery, mas como qualquer um que gosta de aprender bem uma lingua eu quis usar o amado JS. Além de usar o callback para evitar que um setInterval 'invada' o outro eu coloquei no array de mensagens um time, que faz com que eu possa determinar o tempo que o cada mensagem irá demorar para ser exibida, fazendo com que fique mais real, já que ninguém digita no mesmo tempo uma frase longa e uma frase curta.

let quotes = [
      [{message:'Good morning! Could you clean your room? It looks like a cyclone ran through it.', classe:'mom',time:3000},
    {message:'Ok, mom',classe:'sun',time:'1000',time:1000}],
  [{message:"Hey mom, how is going? Could you give me more money to hangout with my friends?", classe:'sun',time:500},{message:"Money doesn't grow on trees you know...", classe:'mom',time:2000}]
];

Este é o array que é passado, como pode ser visto eu passo a classe para identificar se é mãe ou filho, o que faz diferença no visual da mensagem, bem como o aparecimento do tal 'Load' que era a duvida primordial.

Estou BEM satisfeito com o resultado, o projeto é bem sentimental já que é mais ou menos para mostrar para minha mãe o que eu faço, já que desde fevereiro(Quando eu larguei meu emprego e comecei a estudar e dedicar todo meu tempo a isto) ela não entende muito bem o que eu faço.

Sei que não tem ninguém neste tópico, mas tá ai para compartilhar tanto o codigo quanto a sacada.

Manhas usadas: Callback para evitar que um setTimeout seja chamado antes que outro termine. Modelo MVC para facilitar o código. Inline/Inline-block, que graças a uma pessoa aqui da alura, que eu já referencio aqui pois me esqueci do nome, me mostrou devidamente como usar com um artigo BEM completo no medium.

Termino o mês de abril, quase 3 meses de treino, 2 meses de alura com sensaçao de evoluçao. Somente tenho a agradecer a todos que me ajudaram até aqui, pois se eu consegui tando desenvolver este código como resolver meu problema sozinho isso é graças a todos que me ajudaram.

Alura é amor <3

Abraços e keep coding.

Link para o projeto semi-completo: https://codepen.io/pedrobslisboa/full/aGmQaZ/

Mergulhe em programação