[Javascript] eseguire una funzione dopo un'altra

[pleb]

Salve, disegno il contorno di una scritta (una SVG) con la funzione draw() e la coloro con la funzione fill()

<script>

var draw = function() {
   var progress = current_frame/total_frames;
   if (progress > 1) {
     window.cancelAnimationFrame(handle);
   } else {
     current_frame++;
     for(var j=0; j<path.length;j++){
         path[j].style.strokeDashoffset = Math.floor(length[j] * (1 - progress));
     }
    handle = window.requestAnimationFrame(draw);
   }
};
draw();

var fill = function(){
    
    x = document.getElementById("i0");
    y = document.getElementById("i1");   
    z = document.getElementById('i2');
    w = document.getElementById('i3');   

  setTimeout(function(){
    
    x.setAttribute("class", "fade-in-red");
    y.setAttribute("class", "fade-in-blue");
    z.setAttribute("class", "fade-in-green");
    w.setAttribute("class", "fade-in-orange");
    
      }, 3000);   
    
};
fill()

</script>

invece che dare un ritardo di 3 secondi alla funzione fill() vorrei esguire fill() solo dopo l'esecuzione della funzione draw(). Come posso fare?

grazie