1.按鈕點擊後添加loading，介面返回成功後再移除loading（經過多次嘗試發現，此方法不能完全確保只調用一次介面，第二次添加時仍會多次調用介面），方法如下： html代碼： <el-button @click="onSave" :loading="onLoading">保存</el-butt ...
1.按鈕點擊後添加loading，介面返回成功後再移除loading（經過多次嘗試發現，此方法不能完全確保只調用一次介面，第二次添加時仍會多次調用介面），方法如下：
html代碼：
<el-button @click="onSave" :loading="onLoading">保存</el-button>
javascript代碼：
<script> export default { data() { return { onLoading: false, }; }, methods: { onSave() { this.onLoading = true; let parmas = { //這裡是介面傳入參數 }; insert(parmas) .then((res) => { if (res.code === 200) {this.$message.success(res.message); this.onLoading = false; } else { this.$message.error(res.message); this.onLoading = false; } }) .catch((error) => { console.log(error); }); }, }, }; </script>
2.在規定時間內禁用按鈕，按鈕無法點擊，即實現介面不被多次調用，方法如下：
html代碼：
<el-button @click="onSave" :disabled="isdisabled">保存</el-button>
javascript代碼：
<script> export default { data() { return { isdisabled: false, }; }, methods: { onSave() { this.isdisabled = true; //這裡使用定時器解除按鈕禁用 setTimeout(() => { this.isdisabled = false; }, 1500); let parmas = { //這裡是介面傳入參數 }; insert(parmas) .then((res) => { if (res.code === 200) {this.$message.success(res.message); } else { this.$message.error(res.message); } }) .catch((error) => { console.log(error); }); }, }, }; </script>
3.使用Vue自定義全局指令或局部指令
html代碼：
<el-button @click="onSave" v-preventReClick>保存</el-button>
- 自定義全局指令
javascript代碼：
//使用Vue.directive()來自定義全局註冊指令，在main.js中加入下方這段代碼，可以全局應用 Vue.directive("preventReClick", { inserted(el, binding) { el.addEventListener("click", () => { if (!el.disabled) { el.disabled = true; setTimeout(() => { el.disabled = false; }, binding.value || 2000); } }); }, });
- 自定義局部指令
javascript代碼：
//在export default {} 中加入下方這段代碼，可以局部應用 directives: { preventReClick: { // 指令的定義 inserted(el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding.value || 2000) } }) } } }
4.使用節流函數
節流：是指一種在指定事件防止函數被頻繁調用的思想
節流函數：是結合時間戳封裝的函數，在指定時間內會調用一次方法
html代碼：
<el-button @click="getTrottle">保存</el-button>
javascript代碼：
<script> const throttle = (func, wait = 50) => { //上一次執行該函數的時間 let lastTime = 0; return function (...args) { // 當前時間 let now = +new Date(); // 將當前時間和上一次執行函數時間對比 // 如果差值大於設置的等待時間就執行函數 if (now - lastTime > wait) { lastTime = now; func.apply(this, args); } }; }; export default { data() { return { getTrottle: undefined, }; }, created() { this.getTrottle = throttle(this.onSave, 3000); }, methods: { onSave() { let parmas = { //這裡是介面傳入參數 }; insert(parmas) .then((res) => { if (res.code === 200) { this.$message.success(res.message); } else { this.$message.error(res.message); } }) .catch((error) => { console.log(error); }); }, }, }; </script>
以上就可以實現了，如果需要多次使用節流函數，也可以封裝後再使用：
// 封裝節流函數 // 參數:1.回調函數，2.時間，3.布爾值 // 時間戳: 毫秒值 // 相差的毫秒值 = 結束的時間戳 - 開始的時間戳 function trottle(callback,times,bool) { // 記錄開始的時間戳 var startTime = new Date().getTime(); // 記錄布爾值 var fistFlag = bool; // 返回function函數 (事件函數) return function() { // 記錄結束的時間戳 var endTime = new Date().getTime(); // 相差的毫秒值 var totalTime = endTime - startTime; // 記錄事件對象 var args = arguments[0]; // 判斷布爾值是否為true if(fistFlag){ if(typeof callback == "function"){ // 調用回調函數 callback(args); // 設置布爾值為false fistFlag = false; // 重置開始的時間戳 startTime = endTime; } } // 判斷是否達到指定的時間 if(totalTime >= times){ // 符合條件執行回調函數 if(typeof callback == "function"){ // 調用回調函數 callback(args); // 重置開始的時間戳 startTime = endTime; } } } }
以上就是對於用戶短時間內多次點擊按鈕觸發點擊事件的解決方法，哪位小伙伴有其他更簡單的方法歡迎評論留言交流哦~
