微信小程序第二周学习博客--JS计时器，开启、暂停、继续

目前已经是微信小程序的第二周学习，有很多知识点需要巩固、消化、记忆。

js的计时器

这个东西想必前端学者并不陌生，它在生产生活中也经常出现，也非常实用，今天在小程序里用它来做一个短信获取倒计时的功能、其中涉及到定时器的开启、暂停、继续

html
》

其中设置了按钮的大小，按钮的样式和是否禁用采用数据绑定的形式来动态设置，绑定了js的事件，用来触发计时器。

js
》

count用来动态调整倒计时数值，timerId用来当作计时器的id，因为我们要做继续计时器的功能，所以会跨函数调用计时器，直接将其设置为全局变量

页面的初始数据，也就是我们组件的初始状态

clicktime: function () {
    // 设置setData时，避免找不到对象的问题
    var that = this
    // 避免倒计时开始函数多次执行
    if (count != 60) {
      return
    } else {
      // 计时器函数
      function timer() {
        // 计时开始
        count--;
        // 修改页面数据
        that.setData({
          count: count + 's',
          color: '#DCDCDC'
        })
        if (count === 0) {
          // 倒计时至0，逻辑停止重新运行
          clearInterval(timerId)
          count = 60
          that.setData({
            control: false,
            count: '重新发送',
            color: '#000'
          })
        }
      }
      // 调用timer函数、生成定时器
      var timerId = setInterval(timer, 1000)
      // 触发切换后台事件
      wx.onAppHide((res) => {
        // 后台暂停
        clearInterval(timerId)
      }),
      // 触发切换前台事件
        wx.onAppShow((result) => {
          // 前台开启，定时器继续运行
          timerId = setInterval(timer, 1000);
        })
    }

  },

至此我们的逻辑代码部分就完成了
界面效果

	初始页面

	点击后	

我们切后台就会暂停逻辑，切前台的时候逻辑变会继续执行，我认为其中值得学习的是逻辑判断的思想，和定时器的调用，以什么样的方式才可以继续调用定时器，程序肯定还有很大的改进空间，但目前知识储备有限，也希望能获得指点、交流