javascript - JS如何一举删除/停用/销毁所有方法、类、setTimouts和setIntervals？

Question

我有一个创建动画的类。它包括对其他类的调用、其他类的方法、setTimeouts 等。我的任务是制作此动画的退出按钮。通过单击此按钮，所有这些类、方法、循环都应该停止工作。做这个的最好方式是什么？

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

结果 - 需要通过某种机制停止类、异步方法和函数、setTimouts 和 setIntervals

标签： javascript

Answer 1

该setTimeout函数返回一个可用于停止计时器的处理程序。

var timer;

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

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

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

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;
                   });
                 }
};