收藏
回答

如何解决自定义组件内的setInterval调用,clearInterval取消无效问题?

在自定义组件的属性的属性监听器内写倒计时5s,每次属性为true就开始重新从5s倒计时;false就清空倒计时。

现在遇到的问题有两个

1.在ts文件中timer类型错误,;timer该写什么类型呢?

2.在判断属性show=false时,清空计时器无效,timer是同一个,倒计时依然在执行,清空无效,造成show=true时,不是从5s开始倒计时,改在哪里清空倒计时呢?

  properties: {
    show: {
      typeBoolean,
      observer: function (newVal{
        let timer: null | number = null
        if (newVal) {
          let count = 5
           timer = setInterval(() => {
            if (count > 0 && count <= 5) {
              count--
              console.log('countcount倒计时', count)
              this.setData({ count })
            } else {
              clearInterval(timer)
              timer = null
              console.log('countcount结束', count)
            }
          }, 1000)
        } else {
          console.log('countcount中断', timer) // 清空无效,倒计时继续在执行
          clearInterval(timer)
          timer = null
        }
      }
    },
  },
回答关注问题邀请回答
收藏

1 个回答

  • Harlan
    Harlan
    2023-12-05
    1. 第一个问题,那个提示已经给出了答案
    2. 第二问题,看一下函数作用域相关知识,(timer放到组件全局上)
    2023-12-05
    有用 1
    回复 2
    • 小影子是大仙女🎆
      小影子是大仙女🎆
      2023-12-05
      第一个问题我先判断timer是否存在,在执行,解决了;
      第二个问题我吧timer放在data里面,用this.data.timer解决了;(但是我有个疑惑:之前的timer是放在执行函数的最顶层啊)
      2023-12-05
      回复
    • Harlan
      Harlan
      2023-12-05回复小影子是大仙女🎆
      尝试写一个发布订阅,也可以理解为下面的代码。其实你这个没必要用监听器去写,利用组件的生命周期去写相对来说可能更好。
      2023-12-05
      回复
登录 后发表内容