小程序防止多次提交、重复提交

在开发小程序之前，都是使用变量来控制按钮是否能使用，但是在开发小程序过程中，发现使用变量来控制按钮会有延迟，所以找了另一种方法

<!-- 这个是按钮 -->
    <view wx:if="{{toCommit == false}}" class="unext">提交</view>
    <view wx:else class="step" bind:tap="doubleTap" bind:touchstart="touchStart" bind:touchend="touchEnd">提交</view>

data: {
    toCommit: true,
    touchStartTime: 0, // 触摸开始时间
    touchEndTime: 0, // 触摸结束时间
    lastTapTime: 0,
  },
  // 防止重复点击
  touchStart(e) {
    this.touchStartTime = e.timeStamp;
  },
  touchEnd(e) {
    this.touchEndTime = e.timeStamp;
  },
  doubleTap(e) {
    wx.showLoading({ //需要调用 wx.hideLoading()进行关闭
      title: '正在提交...',
    })
    var that = this;
    console.log(e)
    that.setData({
      toCommit: false
    })
    // if(that.touchEndTime - that.touchStartTime < 350){ //有需要做长按功能的可以放掉注释，在else中进行操作
    var currentTime = e.timeStamp// 当前点击的时间
    var lastTapTime = that.lastTapTime
    // 更新最后一次点击时间
    that.lastTapTime = currentTime

    // 如果两次点击时间在3000毫秒内，则认为是多次点击
    if (currentTime - lastTapTime < 3000) {
      wx.showToast({
        title: '请勿重复点击！',
        icon: 'none',
        duration: 1500
      })
    }else{
      console.log('to do sth')
    }
    // }
    setTimeout(function () {
      that.setData({
        toCommit: true
      })
      wx.hideLoading()
    },3000)
  },

//样式
.step{
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: rgba(0, 160, 77, .9);
  color: #fff;
  font-size: 32rpx;
  border-radius: 25rpx;
  margin: 70rpx auto;
}
.unext{
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: rgba(0, 160, 77, .5);
  color: #fff;
  font-size: 32rpx;
  border-radius: 25rpx;
  margin: 70rpx auto;
}