Javascript JS如何一下子删除/停用/销毁所有方法、类、设置超时和设置间隔？

我有一个创建动画的类。它包括对其他类的调用、其他类的方法、设置超时等。我的任务是从这个动画中创建退出按钮。单击此按钮，所有这些类、方法和循环都将停止工作。最好的方法是什么

// 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?

//为动画构建html
类构建电话{
构造函数（IDELENT）{
创建（ideElement）
}
创建（IDEElement）{
this.createWrap（ideElement）
这个文件名为createDisplay（）
这是createElements（）
}
createWrap（IDEElement）{
document.querySelector（'ideElement'））
//设置手机包装
}
createDisplay（）{
//设置显示iphone
}
createElements（）{
//在显示器、wi-fi、电池、btn主页、背面、应用程序中设置时间
}
}
//运行聊天动画
课堂聊天{
构造函数（消息）{
this.messages=消息
这个。startChating（）
}
异步startChating（）{
const timeout=（ms）=>新承诺（resolve=>setTimeout（resolve，ms））；
var timerFunc=函数（i）{
返回异步函数（）{
等待超时（3000）；//发送新消息前延迟3 sek
this.sendmages（this.messages[i]）
this.scrollToBottom（）
if（i

---

结果-需要通过某种机制停止类、异步方法和函数、设置超时和设置间隔。函数返回一个处理程序，您可以使用该处理程序停止反计时器

var timer;

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

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

编辑：下一部分只是一个粗略的示例（我没有让它重新启动。扩展它很容易。）

---

window.reload（）

半开玩笑，但说真的，这要求只需单击一个按钮就可以完成很多事情。请展示一个简化的代码示例。为所有类添加一个

stop（）

方法，并维护一个当用户单击退出按钮时需要停止的所有对象的列表。然后，你可以循环调用所有停止方法的列表。说真的，除非你正在跟踪你提到的每一件事情，否则答案是否定的。可能创建一个Web Worker并执行其中的所有操作，但销毁该Worker相当于重新加载。是的，但这仅适用于seTimout。在我的项目中有很多这样的东西，它们与周期相交。我想知道如何才能最好地做到这一点，这样我就可以停止所有循环、超时，从一个地方停用类（考虑到到处都有等待），创建一个对象，在其中集中所有超时，并使用与它们相关联的组名。当您想要停止一组超时时，您可以执行类似于

obj.stop（groupName）的操作。在异步回调的开始，您添加了类似于
if（obj.isStopped（groupName））return的内容
@DimiSoso我添加了一个示例来说明它的外观。您必须将
setTimeout（resolve，ms）
替换为
timerHub.setTimeout（'something'，resolve，ms）
。
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;
                   });
                 }
};