快捷導(dǎo)航

vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式

更新時間：2023年08月25日 09:08:39 作者：Promise-proto

最近的項目完成后,在性能優(yōu)化階段需要做按鈕的防止重復(fù)點擊功能,本文主要介紹了vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式,具有一定的參考價值,感興趣的可以了解一下

方法一：使用防抖節(jié)流實現(xiàn)--

不選擇原因：它們都是控制單位時間（比如設(shè)置1500秒）內(nèi)禁止操作，但是如果網(wǎng)絡(luò)慢的情況下，超過了1500秒，那用戶是可以繼續(xù)點擊第N遍的，也就是說，我上一個請求還沒結(jié)束，我就可以開始第二個請求了，也就是重復(fù)點擊，重復(fù)請求了，所以此方法不適合我這里用。

方法二：請求里面寫回調(diào)，如下代碼--

            // 確定
			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 => {
					// 在返回結(jié)果里面執(zhí)行
					if (res.data.success) {
						this.isDisabled = true
					} else {
						this.isDisabled = true
					}
				}).catch(err => {
					this.isDisabled = true
				})
			}

不選擇原因：通過代碼可以看到，我是等接口請求結(jié)果出來之后，才可以繼續(xù)點擊按鈕的，這個方法是可行的，可以滿足我的需求，但還不是最優(yōu)解，因為我需要改的頁面太多了，接著往下看。

方法三：在請求攔截器和響應(yīng)攔截器里面控制，如下代碼--

// 這里只展示控制點擊事件主要內(nèi)容
http.interceptor.request((config, cancel) => { /* 請求之前攔截器 */
  // 顯示loading
  uni.showLoading({
    title: "加載中",
    mask: true, // 顯示透明蒙層，防止觸摸穿透
  });
  config.header = {
    ...config.header,
     'X-Access-Token':getTokenStorage()
  }
  return config
})
// 必須使用異步函數(shù)，注意
http.interceptor.response(async (response) => { /* 請求之后攔截器 */
  uni.hideLoading() // 關(guān)閉loading
  return response
}, (response) => {
	// 請求錯誤做點什么
    uni.hideLoading() // 關(guān)閉loading
  return response
})

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

文章到這里就結(jié)束了，大家可以根據(jù)自己的需要，選擇使用哪一種方式

到此這篇關(guān)于vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式的文章就介紹到這了,更多相關(guān)vue uniapp 防止按鈕多次點擊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: