How to Pause & resume setTimeout() inside for loop using angular 6?

I am trying to play & pause the animation which is implemented in a for loop using setTimeout method. I want to smoothly pause & resume the animation from the object on which it is paused or animation is stopped.

Please help to to resolve it.

 setMarkerAnimation(){
let i;
let marker, myLatlng;
let interval = 1200;  // how much time should the delay between two iterations be (in milliseconds)?
if(this.clickCnt == 0){
  i = 0
  myLatlng = {lat: this.lat, lng: this.lng}
  marker = new SlidingMarker({
    position: myLatlng,
    map: this.map,
    title: "I'm sliding marker",
    duration: 1200,
    easing: "easeOutExpo",
    icon:  {
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      scale: 6,
      fillColor: "#ff5050",
      fillOpacity: 1,
      strokeWeight: 1,
      anchor: new google.maps.Point(0, 5)
    },
  });
  this.animationMarker = this.markers
}
else{
  console.log(this.animationMarker)
}
for(let el of this.animationMarker){
  //timeout for setting new position
  this.timer = setTimeout(() => {
    console.log(this.pauseAnimation)
    if(this.pauseAnimation){
      this.index = this.markers.indexOf(el)
      console.log(this.index)
      console.log('Inside setTimeout'+i)
      return false
    } 
    else{
      let newPosition1 = {lat:el.lat,lng:el.lng};
      this.currSpeed = el.speed;
      this.currDate = el.dateTimestamp*1000;
      marker.setPosition(newPosition1);
    }
  }, i * interval);
  i++; 
}

}

I have tried this code using this I can stop the animation as it is returning false but it doesn't pause the setTimeout loop as it prints output continuously for line 4 & 6. Plz help.