有关自定义组件的事件触发延迟问题
发布于 5 年前 作者 xiongyang 6604 次浏览 来自 问答

从自定义组件内部使用

this.triggerEvent(‘num-change’,1)将数据传到组件外,在外部使用e.detail获取这个值,如果点击过快的话会导致数据出错,例如多个组件加起来的值为0,但组件外计算的值却为-1或其他不对的值。


代码如下:

自定义组件:

<view class="num-controller">
  <view class="iconfont icon-jianshao sub-btn" hidden="{{init}}" bindtap="sub"></view>
  <view class="goods-num" hidden="{{init}}">{{num}}</view>
  <view class="iconfont icon-zengjia add-btn" bindtap="add"></view>
</view>
methods: {
   add() {
      
     if (this.data.init) {
       this.setData({
         init: false
       })
     }
     this.setData({
       num: this.data.num + 1
     })
     this.triggerEvent('numChange', 1);
   },
   sub() {
     if(this.data.num > 0) {
       this.setData({
         num: this.data.num - 1
       })
     }
     if(this.data.num == 0){
       this.setData({
         init: true
       })
     }
     this.triggerEvent('numChange', -1);
   }
 }

外部:

<num-controller num="{{0}}" bindnumChange="numChange"></num-controller>

numChange(e) {

    const num = e.detail;
    this.setData({
      goodsNum: this.data.goodsNum + num
    })
  },

因为每次触发

this.trigerrEvent都有一个时间戳,这个时间戳导致了组件内外的数据有差异,点击过快的时候就会出现bug,不知道该如何解决?哪位大佬指导一下?

1 回复

定义个data,用户点下的时候设置已点击,获取到数据时再初始化下数据,如果data是已点击状态无论点多少次都返回 return false

回到顶部