收藏
回答

调用setInterval后无法清除?

我写了一个倒计时函数,但遇到了设置一个一分钟的倒计时,明明结束后已经00:00了,自动又从5959秒重新开始倒计时
刚开始学小程序,求大佬指正,下面附上代码:
// pages/exercise/exercise.js



Page({


  /**
   * 页面的初始数据
   */
  data: {
    showSlider:false,
    showCountDown:false,
    remainTimeText:'',
    hourCountdown: 0,
    countdown: "00:00"
  },


  //打开计时滑动器
  showPicker: function() {
    this.setData({
      showSlider: true,
      showCountDown: false
    });
  },


  //“取消”按钮的隐藏计时滑动器
  CloseSlider(){
    let countdown = this.data.countdown;


    if(countdown !== 0){
      this.setData({
        showSlider:false,
        showCountDown:true
    })
  }
    else{
      this.setData({
        showSlider:false
    })
    }
  },


  //“确认”按钮的隐藏计时滑动器
  hideSlider() {
    const hourCountdown = this.data.hourCountdown;


    // 判断是否存在倒计时,存在则清除
    if (this.interval) {
     clearInterval(this.interval);
    }
  
    this.setData({
    showSlider: false,
    showCountDown: true
    });
  
    // 更新倒计时初始时间
    let countdown = `${hourCountdown.toString().padStart(2"0")}:00`;
    this.setData({
    countdown: countdown
    });
    // 调用倒计时函数
    this.countdownFunc();
  },


  //设置运动时长
  sliderChange(e) {
    this.setData({
      hourCountdown: e.detail.value,
    });
  },


  // 倒计时执行函数
  countdownFunc() {
    let hourCountdown = this.data.hourCountdown;
    let countdown = this.data.countdown.split(":");
    let minutes = Number(countdown[0]);
    let seconds = Number(countdown[1]);
  
    this.interval = setInterval(() => {
      if (hourCountdown > 0 || minutes > 0 || seconds > 0) {
        if (seconds === 0) {
          if (minutes > 0) {
            minutes -= 1;
            seconds = 59;
          } else if (hourCountdown > 0) {
            hourCountdown -= 1;
            minutes = 59;
            seconds = 59;
          }
        } else {
          seconds -= 1;
        }
  
        let formattedTime = `${minutes.toString().padStart(2"0")}:${seconds.toString().padStart(2"0")}`;
  
        this.setData({
          hourCountdown: hourCountdown,
          countdown: formattedTime
        });
      } else {
        this.setData({
          hourCountdown: 0,
          showCountDown: false
        });
      }
    }, 1000);
  
    // 判断是不是无倒计时,如果是,则清除倒计时
    if (this.data.hourCountdown === 0) {
      clearInterval(this.interval);
    }
  },


  //自主加分函数
  pluspoint(){
    wx.showModal({
      title: '请输入数字',
      showCancel: true,
      cancelText: '取消',
      confirmText: '确定',
      editable:true,
      placeholderText:'1min = 1 分',
      success: function (res{
          if (res.confirm) {
              var input_value = res.content; // 获取用户输入的数据
              if (!isNaN(input_value)) {
                  console.log(input_value); // 打印用户输入的数字
              } else {
                  wx.showToast({
                      title: '请输入正确的数字',
                      icon: 'none'
                  })
              }
          } else if (res.cancel) {
              console.log('用户点击取消');
          }
      },
      fail: function (res{
          console.log('弹窗失败');
      }
  })
  },


  //跳转兑换页面
  gotoexchange(e){
    wx.navigateTo({
      url: '/pages/exchange/exchange',
    })
  },


  //将照片发送至邮箱//如果没有服务器或者使用云开发,好像达不到这个功能
  undeveloped(){
    wx.showToast({
      title: '该功能没钱开发',
      icon: 'error',
      mask: true
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //获取全局point
    let point = getApp().globalData.point;
    this.setData({
      point : point
    })
    this.countdownFunc();
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {


  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    let point = wx.getStorageSync('point')
    this.setData({
      point:point
    })
  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {


  },


  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {


  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {


  },


  /**
* 页面上拉触底事件的处理函数
   */
  上到达底部() {


  },


  /**
* 用户点击右上角分享
   */
  在分享应用消息() {


  }
})
回答关注问题邀请回答
收藏

3 个回答

  • 董路飞
    董路飞
    2023-08-15

    和计时器问题无关代码 放的太多了,可以抽离拿个demo说。

    写个原生js的倒计时你参考:

    <!DOCTYPE html>
    <html>
      <body>
          
      <p id="demo"></p>
      
      <script>
        // 设置倒计时的持续时间为60秒
      var duration = 60;
      
      // 获取显示倒计时的元素
      var countdownElement = document.getElementById("demo");
      
      // 定义一个函数来实现倒计时功能
      function countdown() {
        // 检查倒计时是否已经结束
        if (duration < 0) {
          clearInterval(countdownTimer);
          countdownElement.innerHTML = "倒计时已结束";
          return;
        }
      
        // 获取倒计时的分钟和秒数
        var minutes = Math.floor(duration / 60);
        var seconds = duration % 60;
      
        // 在倒计时元素上显示倒计时结果
        countdownElement.innerHTML = minutes + "分" + seconds + "秒";
      
        // 将持续时间减少1秒
        duration--;
      }
      
      // 每一秒调用一次倒计时函数
      var countdownTimer = setInterval(countdown, 1000);
      </script>
      
        </body>
      </html>
    


    2023-08-15
    有用 1
    回复
  • 任性༄🍎
    任性༄🍎
    2023-08-15

    一个简单的倒计时写了那么多代码,还写了那么多的 if 很难不出错

    给你一个思路,细节不知道的话自行度娘:

    1、通过 countTime 来控制倒计时的秒数,如2分钟为 120 秒,至于如何显示,通过格式化函数处理

    2、通过定时器每秒递减1,当小于等于0时,终止定时器


    2023-08-15
    有用 1
    回复
  • Lipeng
    Lipeng
    2023-08-15

    countdownFunc函数最下面的clearInterval的if是永远不会触发的。

    上面的setInterval和this.setData都是异步的,你直接在下面判断if (this.data.hourCountdown === 0)肯定不行。

    2023-08-15
    有用 1
    回复
登录 后发表内容