离开页面时如何销毁所有的setTimeout
======================

#### 问题现象

在一个页面上设置多个[setTimeout](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-timer)定时器，如果存在未执行结束的，在离开页面再次打开这个页面后，setTimeout会接着被运行，关闭页面时如何销毁所有的setTimeout？

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/78/v3/ZHipDr-hSD-GsXlD37iwgg/zh-cn_image_0000002659138343.gif?HW-CC-KV=V1&HW-CC-Date=20260709T133808Z&HW-CC-Expire=86400&HW-CC-Sign=496B36380DC6F4587C0372EB038749418C2899290AFB43AC636270F73DD5E2BE "点击放大")

#### 背景知识

setTimeout：设置一个定时器，该定时器在定时器到期后执行一个函数并在回调被执行后自动删除，或使用[clearTimeout](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-timer#cleartimeout)接口手动删除。

#### 解决方案

目前没有可以清理所有定时器的API，可以使用一个全局数组来存储所有定时器的ID，并在路由跳转、应用进入后台等场景时循环清除这些定时器。

@Entry
@Component
struct clearAllTimeouts1 {
  timeouts: number\[\] \= \[\];
  @State content: number \= 0;
  @State clickNum: number \= 0;

  clearAllTimeouts(timeouts: number\[\]) {
    timeouts?.forEach(timeoutId \=\> {
      clearTimeout(timeoutId); _// 按照定时器ID循环清除定时器_
    });
    this.timeouts \= \[\]; _// 初始化数组_
  }

  onPageHide() {
    this.clearAllTimeouts(this.timeouts); _//_ _离开页面时清除所有定时器_
  }

  build() {
    Row() {
      Column({ space: 20 }) {
        Button('create')
          .onClick(() \=\> {
            this.clickNum++;
            let newTimeoutId \= setTimeout(() \=\> {
              this.content++;
            }, 2000);
            this.timeouts.push(newTimeoutId);
          });
        Button('clear')
          .onClick(() \=\> {
            this.clickNum \= 0;
            this.content \= 0;
            this.clearAllTimeouts(this.timeouts); _// 主动触发清除所有定时器_
          });
        Text('点击了' \+ this.clickNum \+ '次按钮');
        Text('创建了' \+ this.content \+ '个定时器');
      }
      .width('100%');
    }
    .height('100%');
  }
}