评论

小程序防止bindtap事件重复触发或者短时间触发多次操作

​比如页面表单,快速重复点击两次提交按钮,你会发现提交了数据两次,这种现象在正常情况下不会发生,只有当网络非常不好或者手机设备实在太差的时候才会发生这种情况那么如何避免按钮多次点击重复触发事件呢?

视图层

<view bindtap="{{!buttonClicked?‘btnShowConfirm’:’’}}" wx:if="{{btnShow}}" class=“pj-sbuimt” style=“background-color:#FFC000;”>
提交评价
</view>

**逻辑层 js **

const cfclick = require(’…/…/utils/util’) //引入公用js 防重复

data{
buttonClicked: false //防重复提交
}

btnShowConfirm(){
cfclick.ButtonClicked(this)
//执行的代码块
}
util.js
//防重复点击
var ButtonClicked=function (self) {

self.setData({
buttonClicked: true
})
setTimeout(function () {
self.setData({
buttonClicked: false
})
}, 600)
}

module.exports = {
ButtonClicked:ButtonClicked
}

点赞 0
收藏
评论

4 个评论

  • 纸玫瑰
    纸玫瑰
    2019-12-13

    wx.showLoading({

    title: '加载中',

    mask: 'true'

    })

    3行代码解决......点击后就开始运行加载框  mask 只要加载中就不触摸穿透

    2019-12-13
    赞同 2
    回复 1
    • Hasaki
      Hasaki
      2020-01-07
      这个看起来很美好,然而showLoading 是异步的。在这层的基础上,仍然需要加锁处理。
      2020-01-07
      1
      回复
  • 七分
    七分
    2019-12-13

    没有用的,如果手速快还是不能拦截。正确的做法是做同步。

    2019-12-13
    赞同 2
    回复
  • 高
    2023-03-22

    没有重复触发还是会自动跳转两次。

    2023-03-22
    赞同
    回复
  • 周赟
    周赟
    2019-12-13

    函数防抖了解一下

    2019-12-13
    赞同
    回复 2
    • 你回来辣
      你回来辣
      2019-12-14
      好的
      2019-12-14
      回复
    • Bealiah
      Bealiah
      2023-08-14
      还需要处理 失败了可以打破时间限制
      2023-08-14
      回复
登录 后发表内容