小程序清除定时器案例

小程序清除定时器案例

<!--index.wxml-->
<view class='countDown'>倒计时：<text style='color:red'>{{countDownNum}}</text>s</view>

//index.js
Page({
  data: {
    timer: '',//定时器名字
    countDownNum: '60'//倒计时初始值
  },
  onShow: function () {
    this.countDown();
  },

  countDown: function () {
    let that = this; //定时器用箭头函数就不用设置that
    let countDownNum = that.data.countDownNum;
    
    that.setData({
      timer: setInterval(function () { //就相当于要给timer设置值，但是是个定时器，定时器在执行，同时不断赋值，当值等于0时，clearInterval就将timer设置成0，并且暂停！
        countDownNum--;
        that.setData({
          countDownNum: countDownNum
        })
        if (countDownNum == 0) {
          clearInterval(that.data.timer); 
        }
      }, 1000)
    })
  }
})