JSFiddle - React, Tailwind, and code Playground

HTML

<div id="message">
</div>
<audio id="bgm" src="http://www.freesfx.co.uk/rx2/mp3s/9/10780_1381246351.mp3">
</audio>

<div id="count">
</div>

JavaScript

function Typer()
{
var dfd = $.Deferred();
    var srcText = 'EXAMPLE';
    var i = -(1);
    
    //return false;
   
    
    //alert(i); return false;
   
  // var result = srcText[i];
    
   var result = '';
    
    
    setInterval(function() {
                                if(i == srcText.length) {
                                

                                  //  alert(i);     
                                
                                    clearInterval(this);
                                    
                                    dfd.resolve();
                                };
                                
                                $("#count").append( '<br>i ='+i +' , ');
                                

                                 //   alert(i);  
                                i++;  
                                result += srcText[i].replace("\n", "<br />");
                                $("#message").html( result+'---'+i +' , ');
                            
                                
                          },
                          1000);
  return dfd.promise();
} 



function playBGM()
{
  var playsound = $.Deferred();
  $('#bgm')[0].play();
  $("#bgm").on("ended", function() {
     playsound.resolve();
  });
    return playsound.promise();
}


function thirdFunction() {
    alert('third function');
}




Typer().then(playBGM).then(thirdFunction);