定时器（鸿蒙开发）

前言：

日常开发中如果需要代码 延迟一会执行，或者每隔一段时间执行一次，就可以使用定时器

定时器有两种:

1. setTimeout: 延迟执行
2. setInterval: 间隔执行

setTimeout

setTimeout可以用来设置一个定时器，当设置的时间到了之后就会去执行指定的函数

执行一次用 setTimeout

传送门

setTimeout、clearTimeout是一个全局函数，可以直接使用

@Entry
@Component
struct Index {
  // 只是用来保存数据，不影响 UI 可以不加状态修饰符
  timeId?: number

  build() {
    Column({ space: 20 }) {
      Text('延时器-Timeout')
        .fontSize(30)
        .width('100%')
        .textAlign(TextAlign.Center)
      Row({ space: 20 }) {
        Button('开启延时器')
          .onClick(() => {
            // 开启延时器
            let timeId = setTimeout(() => {
              // 延迟执行逻辑
              console.log('代码执行啦')
            }, 2000)

            //  保存定时器 id
            this.timeId = timeId
          })
        Button('关闭延时器')
          .onClick(() => {
            // 调用 clearTimeout 清除定时器
            clearTimeout(this.timeId)
          })
      }
    }
    .padding(10)
  }
}

setInterval

setInterval 也是可以用来设置一个定时器，根据设置的时间间隔来执行指定的函数

执行多次用 setInterval!!

传送门

setInterval、clearInterval是一个全局函数，可以直接使用

@Entry
@Component
struct Index{
  // 只是用来保存数据，不影响 UI 可以不加状态修饰符
  timeId?: number

  build() {
    Column({ space: 20 }) {
      Text('定时器-Interval')
        .fontSize(30)
        .width('100%')
        .textAlign(TextAlign.Center)
      Row({ space: 20 }) {
        Button('开启延时器')
          .onClick(() => {
            this.timeId = setInterval(() => {
              console.log('代码执行啦~')
            }, 2000)
          })
        Button('关闭延时器')
          .onClick(() => {
            clearInterval(this.timeId)
          })
      }
    }
    .padding(10)
  }
}