小程序按钮避免多次调用接口，多次点击方案，不用showLoading

本来是用showLoading的，点击直接转菊花，但是呢，showLoading和 showToast这个方法是冲突的，你转了菊花不能弹toast提示，在某个页面需要提交一次表单和做输入验证，测试说可以点击多次

然后想到可以用一个变量判断是否点击了，然后500毫秒后自动回来

写在公共的utils方法里面

// 0.5秒内防止多次点击
export function btnClickedFun(self) {
    self.setData({
        btnClicked: true
    })
    setTimeout(() => {
        self.setData({
            btnClicked: false
        })
    },500)
}

js 代码

Page({
  data: {
    btnClicked: false
  },
  click: function (e) {
    utils.btnClickedFun(this);
    // 各种处理代码
    
    if (!form[json.departmentId]) {
        utils.showToast('请选择所属部门')
        return
    }
    ...
    // 各种处理代码
    
    utils.showLoading()
    
    开始调接口
    

  },
})

html代码

    <view bindtap="{{!btnClicked?'click':''}}" data-id="{{id}}" />
    <button bindtap="{{!btnClicked?'click':''}}" data-id="{{id}}" />
    <button bindtap="click" disabled="btnClicked" data-id="{{id}}" />
    

实际情况又出现另外种情况，可能0.5s不够用，那就又写了方法手动开关
写在公共的utils方法里面

// 防止多次点击 不点击
export function btnClickedOne(self, state) {
    self.setData({
        btnClicked: state
    })
}

    // 实际调用，手动传状态更改
    utils.btnClickedOne(this, true) 打开
    utils.btnClickedOne(this, false) 关闭