怎么绝对地控制按钮不被重复点击？
发布于 5 年前 作者 jing37 1481 次浏览 来自 官方Issues

我现在的控制方式是加了一个

buttonClicked 的参数，初始化为false，如下：

<button bindtap=“submit” style=“color:white;width:100%;height:90rpx;background-color:rgb(18, 172, 18);” disabled="{{buttonClicked}}">提交</button>

submit: function (event) {

if(!this.data.buttonClicked)

{

this.setData({ buttonClicked: true });

wx.navigateTo({

url: ‘…/Home/Home’

})

}

}

onShow: function () {

this.setData({ buttonClicked: false })

}

但是当我重复点击的速度__足够快__时，程序就停留在当前界面不跳转了…而且之后再怎么点击，都没有反应了。

我猜是因为重复点击的速度比程序执行的速度更快，导致buttonClicked还未设置成true，就已经有两次事件触发了。

怎样做到无论用户重复点击的速度有多快，都不会触发两次事件呢？

求高手解答~

3 回复

已解决，原来是navigate到10次了…

1.buttonClicked 可以挂上下文上，不挂data上

2.setData在逻辑层是同步的，在渲染层是异步的。

可以试试这样：

submit: function (event) {
  if(!this.buttonClicked){
    return;
  }
  this.buttonClicked=true;
  wx.navigateTo({
     url: '../Home/Home'
  })
}

onShow: function () {
 this.buttonClicked=false;
}

debounce了解一下：https://developers.weixin.qq.com/community/develop/article/doc/000a645d8b8ba0d8722863ef45bc13

回到顶部