当前位置：首页 > article >正文

鸿蒙进阶篇-定时器、递归

article 2024/11/17 11:20:23

“在科技的浪潮中，鸿蒙操作系统宛如一颗璀璨的新星，引领着创新的方向。作为鸿蒙开天组，今天我们将一同踏上鸿蒙基础的探索之旅，为您揭开这一神奇系统的神秘面纱。”

各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今天的学习,鸿蒙进阶篇-定时器、递归

在鸿蒙开发中：

定时器：鸿蒙提供了相关的 API 来创建和使用定时器，用于实现定时触发任务、更新界面元素或执行其他周期性的操作。定时器可以帮助开发者实现一些与时间相关的功能逻辑，确保在特定的时间间隔后执行相应的代码块。

递归：和其他编程语言中的概念类似，在鸿蒙开发中，如果一个函数直接或间接地调用自身来解决问题，就形成了递归。例如在处理某些具有递归性质的数据结构（如树形结构）或者解决一些可以通过递归方式更简洁地表达的算法问题时，可能会用到递归。但需要注意递归可能会导致栈溢出等问题，所以在使用时要确保有合适的终止条件。

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

setTimeout

setTimeout可以用来设置一个定时器，当设置的时间到了之后就会去执行指定的函数
执行一次用 setTimeout
附上官方文档链接https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout
setTimeout、clearTimeout是一个全局函数，可以直接使用

下面展示一个案例来理解:

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

  build() {
    Column({ space: 20 }) {
      Text('延时器-Timeout')
        .fontSize(30)
        .width('100%')
        .textAlign(TextAlign.Center)
      Row({ space: 20 }) {
        Button('开启延时器')
          .onClick(() => {
            // 开启延时器
            let timeId = setTimeout(() => {
              this.word++
            }, 200)

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

setInterval

setInterval 也是可以用来设置一个定时器，根据设置的时间间隔来执行指定的函数
执行多次用 setInterval!!
附上官方文档链接https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval
setInterval、clearInterval是一个全局函数，可以直接使用

下面展示一个案例来理解:

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

  build() {
    Column({ space: 20 }) {
      Text('定时器-Interval')
        .fontSize(30)
        .width('100%')
        .textAlign(TextAlign.Center)
      Row({ space: 20 }) {
        Button('开启延时器')
          .onClick(() => {
            this.timeId = setInterval(() => {
              this.word++
            }, 2000)
          })
        Button('关闭延时器')
          .onClick(() => {
            clearInterval(this.timeId)
          })
      }

      Text(this.word.toString())
    }
    .padding(10)
  }
}

案例-获取验证码
接下来通过刚刚学习的定时器，来完成一个获取验证码的倒计时功能

下面展示一个案例来理解:

@Entry
@Component
struct LoginDemo {
  @State time: number = 0

  build() {
    Column() {
      this.titleBuilder()
      TextInput({ placeholder: '请输入手机号' })
        .textInputExtend()
      Divider()
      Row() {
        TextInput({ placeholder: '请输入验证码' })
          .textInputExtend()
          .layoutWeight(1)
        Text(this.time == 0 ? '发送验证码' : `${this.time}秒后获取`)
          .fontSize(14)
          .fontColor(Color.Gray)
          .onClick(() => {
            // 避免倒计时 为 0 时，重复点击
            if (this.time != 0) {
              return
            }
            setTimeout(() => {
              AlertDialog.show({
                message: Math.floor(1000 + 9000 * Math.random())
                  .toString()
              })
            }, 2000)
            this.time = 60
            const timeId = setInterval(() => {
              this.time--
              // 倒计时结束，清空定时器
              if (this.time == 0) {
                clearInterval(timeId)
              }
            }, 1000)
          })
      }
      .width('100%')

      Divider()

      Button('登录')
        .width('100%')
        .type(ButtonType.Normal)
        .backgroundColor('#ea6051')
        .margin({ top: 50 })

    }
    .padding({ top: 80, left: 40, right: 40 })
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  titleBuilder() {
    Text('短信登录')
      .fontSize(25)
      .fontWeight(600)
      .margin({ bottom: 30 })
  }
}

@Extend(TextInput)
function textInputExtend() {
  .backgroundColor(Color.White)
  .padding({ left: 0, top: 20, bottom: 20 })
  .placeholderColor('#ccc')
}

递归
调用自身的函数我们称之为递归函数。
附上官方文档链接https://developer.mozilla.org/zh-CN/docs/Glossary/Recursion

基本用法
在某种意义上说，递归近似于循环。两者都重复执行相同的代码，并且两者都需要一个终止条件（避免无限循环，或者在这种情况下更确切地说是无限递归）。

// 没有退出条件的递归函数--无限递归 function func(){ func() }

下面展示一个案例来理解:

let num: number = 1

function printLog(num: number) {
  console.log(`你好,第${num}次打印`)
  // 递减
  num--
  // 退出条件
  if (num > 1) {
    printLog(num)
  }
}

// 打印 10 次
printLog(10)

@Entry
@Component
struct Example01 {
  build() {
    Column() {
      Column() {
        Column() {
        }
        .margin(10)

      }.width(250)
      .height(500)
      .backgroundColor('#eee')
      .border({ width: 2, color: 'green', style: BorderStyle.Solid })

    }.width('100%')
  }
}