小程序按钮避免多次调用接口,多次点击方案,不用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代码

    
    

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

// 防止多次点击 不点击
export function btnClickedOne(self, state) {
    self.setData({
        btnClicked: state
    })
}
    // 实际调用,手动传状态更改
    utils.btnClickedOne(this, true) 打开
    utils.btnClickedOne(this, false) 关闭

你可能感兴趣的:(小程序,前端)