JS how to delete / deactivate / destroy all methods, classes, setTimouts and setIntervals in one fell swoop?

Question

I have a class that creates animation. It includes calls to other classes, methods of other classes, setTimeouts, etc. My task is to make the exit button from this animation. By clicking on this button, all these classes, methods, loops should stop working. What is the best way to do this?

// build html for animation
class BuildPhone{
  constructor(idElement) {
    this.create(idElement)
  }
  create(idElement) {
    this.createWrap(idElement)
    this.createDisplay()
    this.createElements()
  }
  createWrap(idElement){
    document.querySelector('idElement')
    // set wrapper for phone
  }
  createDisplay(){
    // set display iphone
  }
  createElements(){
    // set time in display, wi-fi, battery, btn's Home,Back,Apps
  }
}

// run chating animation
class Chat{
  constructor(messages){
    this.messages = messages
    this.startChating()
  }
  async startChating(){
    const timeout = (ms) => new Promise(resolve => setTimeout(resolve, ms));
    
    var timerFunc = function(i) {
      return async function() {
        await timeout(3000); // 3 sek delay before send new message

        this.sendMessage(this.messages[i])
        this.scrollToBottom()

        if (i < this.messages.length) {
          setTimeout(timerFunc(++i), 0); 
        }
      }
    }
    setTimeout(timerFunc(0), 500); // start loop
  }
  sendMessage(message){
    // add message text to list messages in chat
  }
  scrollToBottom(){
    // this code for scrolling to bottom in chat after send message
  }
}

class PhoneAnimation{
  constructor(args) {
    create(args)
  }
  async create(args) {
    // build html for animation
    await new BuildPhone(args.idElement)
    // run chating animation
    await new Chat(args.messages)
  }

}

// ------ init -------
args = {
  idElement: '#targetElement1',
  messages: [
    {
      from: 'app',
      text: 'hello)'
    },
    {
      from: 'user',
      text: 'hi'
    },
    {
      from: 'app',
      text: 'how are you?'
    },
  ]
}

// init animation
new PhoneAnimation(args)
//HOW TO KILL ALL ANIMATION IF IT RUNED?

result - need stoped classes, async methods and functions, setTimouts and setIntervals through some mechanism

Answer 1

The setTimeout function returns a handler that you can use to stop de timer.

var timer;

function tick() {
   // do stuff
   timer = setTimeout(tick, 1000);
}

function stop () {
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
}

Edit: the next part is only a rough example (I have not made it possible to restart. It would be easy to extend it.)

var timerHub = {
   "timers":{}
  ,"setTimeout": function (groupName, fn, time) {
                   groupName = groupName || "@";
                   var timer = setTimeout(fn ,time);
                   if (! timers.hasOwnProperty(groupName)) { 
                     timers[groupName] = {"isStopped":false,"list":[]};
                   }
                   timers[groupName].list.push(timer);
                 }
  ,"isStopped": function (groupName) {
                   groupName = groupName || "@";
                   if (! timers.hasOwnProperty(groupName)) { 
                     return true;
                   }
                   return timers[groupName].isStopped; 
                 }
  ,"stop": function (groupName) {
                   groupName = groupName || "@";
                   if (! timers.hasOwnProperty(groupName)) { 
                     return;
                   }
                   timers[groupName].isStopped = true; 
                   timers[groupName].list.map((t) => {
                     if (!t) return t;
                     clearTimeout(t);
                     return undefined;
                   });
                 }
};