简介

防止重复点击是为防止由于网络问题未响应或者客户多次点击导致数据多次请求致后台，造成后台数据出现重复处理及其他幂等性问题，我们通过再小程序全局配置，在触发后台请求参数时，通过特定方式调用这个全局配置方式，控制住重复点击带给我们的困扰。

实战

app.js

App({
  globalData: {
    PageActive: true
  },
 /**
   * 防止重复点击
   * @param {参数} fn 
   */
  preventActive(fn,time) {
    time = time || 500;
    const self = this
    if (this.globalData.pageActive) {
      this.globalData.pageActive = false
      if (fn) fn()
      setTimeout(() => {
        self.globalData.pageActive = true
      }, time);
    }else{
      console.log("重复点击")
    }
  }
})

其他js下调用

 /**
   * 查询按钮触发函数
   * @param {参数} e 
   */
  handleSearchVal(e) {
    getApp().preventActive(() => {
      const orderName = e.detail;
      this.setData({
        page: 1,
        orderName: orderName,
        contentList: []
      });
      this.orderList();
    })
  }

效果图

image.png