JSFiddle - React, Tailwind, and code Playground

HTML

<span id="legendaSpan"></span>

JavaScript

var arrLegendas = [
                      ["legenda 1, blablalba", 0], // dura 4 segundos
                      ["legenda 2, blablalbaaldaldald", 4000], // dura 1 segundo
                      ["legenda 3, bla", 1000], // dura 3 segundos
                      ["legenda 4, blablalbaasdasd", 3000] // permanece...
                  ]

// notar que nesse esquema os delays de cada legenda tem que ser colocados pensando no tempo de execução do proximo já que este sobescreverá o nó de texto do elemento anterior enquanto o posterior não o faz. * ver nos comentários do array *.

var plusPrevious = 0; 

arrLegendas.forEach(function(p, i) { // loop no arrLegendas

    setTimeout(function() { // para cada item (p) do loop ...
                                
     var legS = $('#legendaSpan');
 
     legS.fadeIn(0)
            .html(p[0]) // mudar html de legS para string de 'p' atual
            .delay( parseInt(arrLegendas[i+1][1]) ) // delay = delay da proxima legenda  
            .fadeOut(250)
                                
    }, plusPrevious + parseInt(p[1])); // tempo de execução = soma de execuções anteriores + atual. 
    
});
                        
plusPrevious = plusPrevious + parseInt(p[1] + 250); // incrementa contador de tempo execuções anteriores