uniapp--vue中按钮防止重复点击操作

最近的项目完成后，在性能优化阶段需要做按钮的防止重复点击功能，

下面是我考虑过的一些实现方法以及弊端，如有遗漏，欢迎大家评论区留言讨论哈~

方法一：使用防抖节流实现--

不选择原因：它们都是控制单位时间（比如设置1500秒）内禁止操作，但是如果网络慢的情况下，超过了1500秒，那用户是可以继续点击第N遍的，也就是说，我上一个请求还没结束，我就可以开始第二个请求了，也就是重复点击，重复请求了，所以此方法不适合我这里用。

方法二：请求里面写回调，如下代码--

            // 确定
			config() {
				// this.isDisabled = true	//	true,允许点击
				if (!this.isDisabled) return
				this.isDisabled = false
				
				const findParam = {
					"id": uni.getStorageSync('login_user_info').username,
					"remarks": this.remarks
				}

				submitApi(findParam).then(res => {
					// 在返回结果里面执行
					if (res.data.success) {
						this.isDisabled = true
					} else {
						this.isDisabled = true
					}
				}).catch(err => {
					this.isDisabled = true
				})

			}

不选择原因：通过代码可以看到，我是等接口请求结果出来之后，才可以继续点击按钮的，这个方法是可行的，可以满足我的需求，但还不是最优解，因为我需要改的页面太多了，接着往下看。

方法三：在请求拦截器和响应拦截器里面控制，如下代码--

// 这里只展示控制点击事件主要内容

http.interceptor.request((config, cancel) => { /* 请求之前拦截器 */
  // 显示loading
  uni.showLoading({
    title: "加载中",
    mask: true, // 显示透明蒙层，防止触摸穿透
  });
  
  config.header = {
    ...config.header,
     'X-Access-Token':getTokenStorage()
  }
  return config
})

// 必须使用异步函数，注意
http.interceptor.response(async (response) => { /* 请求之后拦截器 */
  uni.hideLoading() // 关闭loading
  return response
}, (response) => {
	// 请求错误做点什么
    uni.hideLoading() // 关闭loading
  return response
})

我这里使用了全局Loading，这个方法是符合我的需求的。

文章到这里就结束了，大家可以根据自己的需要，选择使用哪一种方式，Bye~