前端vue中防止用戶短時間內多次點擊按鈕觸發點擊事件解決方法

来源:https://www.cnblogs.com/Steal-cha-of-Melon/archive/2023/01/12/walon_first_title.html
-Advertisement-
Play Games

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;
            }
        }
    }
}

  以上就是對於用戶短時間內多次點擊按鈕觸發點擊事件的解決方法,哪位小伙伴有其他更簡單的方法歡迎評論留言交流哦~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • AngularJS——初識AngularJS AngularJS是什麼 AngularJS是Google開源的一款前端JS結構化框架,它通過對前端開發進行分層,極好地規範了前端開發的風格——它將前端開發分為Controller層、Service層、DAO層和Model層。其中,Model對象與HTM ...
  • JavaScript 面向切麵編程 (AOP) 是一種編程思想和實現方式,它將一些關註點(例如日誌記錄、安全性檢查、性能監控等)從主題對象中分離出來,通過“橫切關註點”的方式在程式中動態地織入這些關註點。這樣可以避免在主題對象中嵌入大量的關註點代碼,使得代碼更加簡潔和可維護。 ...
  • CSS Grid 佈局是一種二維佈局方式,可以將頁面分成行和列,併在其中放置元素。使用 Grid 佈局時,需要定義網格容器和網格項目。 ...
  • Axios 1.基本說明 Axios是一個基於promise的網路請求庫,作用於node.js和瀏覽器中。它是 isomorphic 的 (即同一套代碼可以運行在瀏覽器和node.js中)。在服務端它使用原生node.js http 模塊, 而在客戶端 (瀏覽端) 則使用XMLHttpRequest ...
  • JavaScript 是一種基於原型繼承的語言。在 JavaScript 中,對象是通過原型鏈來繼承屬性和方法的。 一、原型 每一個對象都有一個 proto 屬性,該屬性指向該對象的原型。原型本質上也是一個對象,所有的對象都擁有一個原型,除了 Object.prototype。 JavaScript ...
  • 著意登樓瞻玉兔,何人張幕遮銀闕?又到了一年一度的網頁小掛件環節,以往我們都是集成別人開源的組件,但所謂熟讀唐詩三百首,不會做詩也會吟,熟讀了別人的東西,做幾首打油詩也是可以的,但若不能自出機抒,卻也成不了大事,所以本次我們從零開始製作屬於自己的網頁小掛件,博君一曬。 玉兔主題元素繪製 成本最低的繪製 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、audio標簽的使用 1、Audio 對象屬性 2、對象方法 二、效果 效果如下: 三、代碼 代碼如下: MusicPlayer.vue <template> <div class="music"> <!-- 占位 --> <div ...
  • 摘要:輸入網址並點回車,後臺到底發生了什麼。透析 HTTP 協議與 TCP 連接之間的千絲萬縷的關係。掌握為何是三次握手四次揮手?time_wait 存在的意義是什麼?全面圖解重點問題,再也不用擔心面試問這個問題。 本文分享自華為雲社區《輸入網址,小手一點,後面到底發生了什麼?》,作者:龍哥手記。 ...
一周排行
    -Advertisement-
    Play Games
  • 隨著Aspire發佈preview5的發佈,Microsoft.Extensions.ServiceDiscovery隨之更新, 服務註冊發現這個屬於老掉牙的話題解決什麼問題就不贅述了,這裡主要講講Microsoft.Extensions.ServiceDiscovery(preview5)以及如何 ...
  • 概述:通過使用`SemaphoreSlim`,可以簡單而有效地限制非同步HTTP請求的併發量,確保在任何給定時間內不超過20個網頁同時下載。`ParallelOptions`不適用於非同步操作,但可考慮使用`Parallel.ForEach`,儘管在非同步場景中謹慎使用。 對於併發非同步 I/O 操作的數量 ...
  • 1.Linux上安裝Docken 伺服器系統版本以及內核版本:cat /etc/redhat-release 查看伺服器內核版本:uname -r 安裝依賴包:yum install -y yum-utils device-mapper-persistent-data lvm2 設置阿裡雲鏡像源:y ...
  • 概述:WPF界面綁定和渲染大量數據可能導致性能問題。通過啟用UI虛擬化、非同步載入和數據分頁,可以有效提高界面響應性能。以下是簡單示例演示這些優化方法。 在WPF中,當你嘗試綁定和渲染大量的數據項時,性能問題可能出現。以下是一些可能導致性能慢的原因以及優化方法: UI 虛擬化: WPF提供了虛擬化技術 ...
  • 引言 上一章節介紹了 TDD 的三大法則,今天我們講一下在單元測試中模擬對象的使用。 Fake Fake - Fake 是一個通用術語,可用於描述 stub或 mock 對象。 它是 stub 還是 mock 取決於使用它的上下文。 也就是說,Fake 可以是 stub 或 mock Mock - ...
  • 為.net6在CentOS7上面做準備,先在vmware虛擬機安裝CentOS 7.9 新建CentOS764位的系統 因為CentOS8不更新了,所以安裝7;簡單就一筆帶過了 選擇下載好的操作系統的iso文件,下載地址https://mirrors.aliyun.com/centos/7.9.20 ...
  • 經過前面幾篇的學習,我們瞭解到指令的大概分類,如:參數載入指令,該載入指令以 Ld 開頭,將參數載入到棧中,以便於後續執行操作命令。參數存儲指令,其指令以 St 開頭,將棧中的數據,存儲到指定的變數中,以方便後續使用。創建實例指令,其指令以 New 開頭,用於在運行時動態生成並初始化對象。方法調用指... ...
  • LiteDB 是一個輕量級的嵌入式 NoSQL 資料庫,其設計理念與 MongoDB 類似,但它是完全使用 C# 開發的,因此與 C# 應用程式的集成非常順暢。與 SQLite 相比,LiteDB 提供了 NoSQL(即鍵值對)的數據存儲方式,並且是一個開源且免費的項目。它適用於桌面、移動以及 We ...
  • 1 開源解析和拆分文檔 第三方的工具去對文件解析拆分,去將我們的文件內容給提取出來,並將我們的文檔內容去拆分成一個小的chunk。常見的PDF word mark down, JSON、HTML。都可以有很好的一些模塊去把這些文件去進行一個東西去提取。 優勢 支持豐富的文檔類型 每種文檔多樣化選擇 ...
  • OOM是什麼?英文全稱為 OutOfMemoryError(記憶體溢出錯誤)。當程式發生OOM時,如何去定位導致異常的代碼還是挺麻煩的。 要檢查OOM發生的原因,首先需要瞭解各種OOM情況下會報的異常信息。這樣能縮小排查範圍,再結合異常堆棧、heapDump文件、JVM分析工具和業務代碼來判斷具體是哪 ...