微信小程序设置定时器达到计时效果

很多时候，我们在微信小程序中需要让它过了一段时间自动执行一个方法，这个时候我们就需要利用setInterval来设置定时器。

number setInterval(function callback, number delay, any rest)
设定一个定时器。按照指定的周期（以毫秒计）来执行注册的回调函数

参数
function callback
回调函数

number delay
执行回调函数之间的时间间隔，单位 ms。

any rest
param1, param2, …, paramN 等附加参数，它们会作为参数传递给回调函数。

返回值
number
定时器的编号。这个值可以传递给 clearInterval 来取消该定时。

以上内容来自小程序微信官方文档

说了这么多，接下来直接看我写的代码吧。

wxml代码如下:

<view class="container">
  <image class="icon" src="/image/menu/paySuccess.png" />
  <view class="tip">订单提交成功,点击确定立即至订单列表页</view>
  <view class="timing">{{time}}s<text>后自动返回</text>
  </view>
  <button class="btn_submit" catchtap="paySuccessSubmit">确定</button>
</view>

js关键部分代码如下：

  /**
   * 页面的初始数据
   */
  data: {
    time: 5,
  },

      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        this.setTime()
      },
      // 设置计时器
      setTime(){
        let that = this
        let myTime = setInterval(function () {
          that.setData({
            time: that.data.time - 1
          })
          if (that.data.time == 0) {
            clearInterval(myTime)
            wx.navigateTo({
             url:''
            })
          }
        }, 1000)
      },

首先讲一下我的思路
刚开始data里定义time给他初始值5，然后每过个一秒钟让time减1，等到time变成0再清除计时器，并且让他自动跳到其他页面。

实现效果如下: