定时器

定义一个全局的timerList,数据结构为
timerList=[{
id: timerId,
app:appName
}],
思路是，如果展开一行，那就为这个app添加一个log刷新的定时器，去刷新最新的log下来，同事记录这个定时器的timerId， 而如果这行被折叠起来，就去timerList里找到这个app 对应的timerId, 把这个timerId 对应的定时器清除掉。

还有， 在整个component周期的destory阶段要把所有的定时器清除。不然一直执行的程序会占用计算资源。

//Expand方法在每次展开或者合上的时候都会触发，因此要判断当前操作的行是被展开的还是被合上（其实应该是行的click事件）
async handlerRowExpand(row: any, expandedRows: any[]) {
        let expandedApps = map(expandedRows, "name");
        if (includes(expandedApps, row.name)) {
           //展开的行里有当前选中的行，说明这行现在是在展开的状态，不是合上的状态
            await this.getLastBuild(row);
            let timerId = setInterval(() => this.getLastBuild(row), 20000);
            this.timerList.push({app: row.name, id: timerId})
        }else{
            //如果当前行是要被合起来的，所以如果它之前有定时器，要关掉，因为不需要刷新它的log
            let timers = filter(this.timerList, timer => timer.app === row.name);
            if (!isEmpty(timers)) {
                timers.forEach(t => {
                    if (t.id > 0) {
                        clearInterval(t.id);
                    }
                });
                this.timerList = pullAllWith(this.timerList, timers, isEqual)
            }
            return;
         }
    }

destroyed() {
      this.timerList.forEach(t => clearInterval(t.id))
       console.log("app timer cleared!")
  }

关于vue的生命周期我参考了下面这篇文章：当然也可以查官网。

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:

beforeCreate

created

beforeMount

mounted

(

    beforeUpdate

    updated

)

beforeDestroy

destroyed

作者：CalvinXie
链接：https://www.jianshu.com/p/410b6099be69
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。