對于防止按鈕重復點擊的嘗試詳解
導語：隨著接觸的項目增加，很多項目都是遇到同樣的問題，而每次都是使用一貫的手法進行處理。有時候有些方法并不是那么的優(yōu)雅甚至有些冗余，所以自己也想開始嘗試不同的方法去解決同樣的問題。
我經(jīng)常在項目中會遇到按鈕重復點擊后引起表單的重復點擊問題。所以針對這個問題，自己嘗試了幾種辦法分別去解決。直接上代碼。
1.粗暴簡單辦法
直接定義一個變量，每次點擊過后等所有操作結(jié)束后釋放變量?；蚴褂胠oading防止用戶點擊
//* 部分代碼
<script>
export default {
methods: {
onSubmit() {
if (this.lock) return;
this.lock = true;
// const load = this.$loading();
this.$http.create().then((res) => {
// do something
this.lock = false;
// load.close();
}).catch(() => {
this.lock = false;
// load.close();
})
},
},
}
</script>
這種辦法簡單粗暴，但是每次需要防止重復點擊的地方,都要去關(guān)注lock或者loading的重置，總覺的很啰嗦。也沒辦法好好的抽離出來。（PS:能力有限，自己也沒有想到比較好的辦法在上層優(yōu)雅的封裝出來）
2.直接把loading放到http請求中去做，統(tǒng)一封裝方法
//* 部分代碼
...
let load;
http.interceptors.request.use((config) => {
load = Loading();
...
return config;
}, error => {
load.close();
return Promise.reject(error)
});
http.interceptors.response.use((response) => {
load.close();
...
return response;
},error => {
load.close();
return Promise.reject(error);
});
這種辦法在實際中也用過了一段時間，一開始挺好用的，但是在后面自己弱網(wǎng)測試的時候發(fā)現(xiàn)也是會導致重復點擊的情況。而且在有些時候loading圖并不是所有請求都需要，還要去做個是否顯示loading的配置，這樣感覺http請求又笨重了，也沒有讓重復點擊功能抽離出來。
3.裝飾器方法
說到裝飾器，最經(jīng)典的應用場景就是面向切片編程（AOP），《前端常用設計模式(1)--裝飾器(decorator)》juejin.im/post/5cb415… 做出了很棒的理解與應用。得益于ES7和TS，裝飾器在Angular和react中都有很多案例，因為Vue中Class不是必選，所以在Vue中很少看到使用裝飾器的，得益于官方有vue-class-component來使用Class進行創(chuàng)建組件的方法，開始了自己的嘗試之路。
lock.js
export function lock(target, key, desc) {
const fn = desc.value;
//* 沒有使用箭頭函數(shù)是為了讓this能指回到vue，這樣就可以獲取到vue的data，從而做更多的事情，下面會講到
desc.value = async function() {
if (this.$lock) return;
this.$lock = true;
await fn.apply(this).catch(() => {
this.$lock = false;
});
this.$lock = false;
return target;
};
}
index.vue
<template>
<!-- do something -->
</template>
<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import { lock } from './lock';
@Component
export default class extends Vue {
@lock
async onSubmit() {
await this.$http.create();
// do something
}
}
</script>
感覺這樣就完全抽離了重復點擊的功能（PS：好像是這樣的），也能獨立測試，想在哪里用就在哪里用。感覺不足的是，裝飾器里需要讓this重新指回vue才能獲取到vue的data
4.舉一反三
既然重復點擊可以從業(yè)務代碼中抽離出來，那我們提交表單的字段驗證也就同樣可以抽離出來了。（PS：所有UI框架都有成熟的form表單驗證組件，就當我是瞎折騰）
validate.js
export function validate(target, key, desc) {
const fn = desc.value;
desc.value = async function () {
const {
name, phone,
} = this.data;
if (!name) {
return confirm('請輸入您的姓名');
}
if (name.length > 20) {
return confirm('您的姓名不能超過20個字');
}
if (!phone) {
return confirm('請輸入您的電話');
}
if (!((/^\d{11}$/.test(phone)))) {
return confirm('請輸入11位的電話號碼');
}
await fn.apply(this);
return target;
};
}
index.vue
<template>
<!-- do something -->
</template>
<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import { validate } from './validate';
@Component
export default class extends Vue {
data = {
name: '',
phone: '',
}
@validate
async onSubmit() {
await this.$http.create();
// do something
}
}
</script>
5.防抖方法（補充）
有小伙伴說可以使用防抖，個人覺得還是需要看場景，這里也就列出防抖的方法。
防抖方法是一個很好限制重復事件頻繁觸發(fā)的，經(jīng)常用在scroll、resize事件上，也可以嘗試用在重復點擊上面。但是如果點擊事件后需要有異步處理，單單使用防抖方法也會沒辦法限制弱網(wǎng)（PS：吐槽一下成都地鐵上移動經(jīng)常網(wǎng)絡不好）下重復點擊的情況。如：防抖時間為1秒，但是請求花掉了2秒才返回數(shù)據(jù)給前端進行處理，中間產(chǎn)生了時間差，導致用戶有時間重復點擊。所以個人覺得還是需要配合其它辦法。同樣列出防抖的列子：
throttle.js
const throttle = function(fn, wait, scope) {
clearTimeout(throttle.timer);
throttle.timer = setTimeout(function() {
fn.apply(scope);
}, wait);
};
index.vue
<template>
<!-- do something -->
</template>
<script>
export default {
onSubmit() {
throttle(() => {
this.$http.create().then((result) => {
// do something
});
}, 1000);
},
};
</script>
以上所述是小編給大家介紹的對于防止按鈕重復點擊的嘗試詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
![PPK 談 JavaScript 的 this 關(guān)鍵字 [翻譯]](http://img.jbzj.com/images/xgimg/bcimg0.png)
PPK 談 JavaScript 的 this 關(guān)鍵字 [翻譯]
在 JavaScript 中 this 是最強的關(guān)鍵字之一。這篇貼文就是要告訴你如何用好 this。2009-09-09
layui 監(jiān)聽彈窗關(guān)閉并刷新父級table的場景分析
這篇文章主要介紹了layui 監(jiān)聽彈窗關(guān)閉并刷新父級table的場景分析,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
寫了幾個類，希望對大家有用。...2006-12-12
ES6使用Set數(shù)據(jù)結(jié)構(gòu)實現(xiàn)數(shù)組的交集、并集、差集功能示例
JavaScript數(shù)組_動力節(jié)點Java學院整理