【js】按鈕頻繁過快點擊，防止重復提交處理

場景：收費處醫生，為了提高效率，快速開單，經常會習慣性的多點保存/確認按鈕；往往會發生多次請求，造成打印單據重復，結算金額對不上；故提出防止重復提交的控制；

解決方案：1.增加二次確認操作，彈框式確認；無疑會增加操作步驟，更麻煩了。2.防抖函數，控制在幾秒內的點擊只提交一次請求，記錄最后一次點擊開始計時請求；（待定）3.變量開關控制，保證幾秒之內只提交一次，代碼塊立即

執行（可取）

實現：2.防抖函數

封裝方法 例如：tools/index下Util對象中

 

 

 

 

 

 /*
     * fn [function] 需要防抖的函數
     * interval [number] 毫秒，防抖期限值
     * 在第一次觸發事件時，不立即執行函數，而是給出一個期限值比如300ms
     * 讓某個時間期限（300毫秒）內，事件處理函數只執行一次。
     */
    debounce(fn, interval) {
        var timeout = null;//借助閉包
        return function (e) {
            clearTimeout(timeout);//進入該分支語句，說明當前正在一個計時過程中，並且又觸發了相同事件。所以要取消當前的計時，重新開始計時
            timeout = setTimeout(() => { // 進入該分支說明當前並沒有在計時，那么就開始一個計時
                fn.apply(this, arguments);
            }, interval ? interval : 300);
        };
    },

引入方法

import { Util } from 'tools/index';

a.

handleQuery = Util.debounce((name, status, quarters) => {
		console.log("---",name, status, quarters)
            //代碼塊  可接收參數 
		
},2000)

　b.　按鈕事件 handleBtn

handleBtn=()=>{
   let {status, name, quarters} = this.state;
   this.handleQuery(name, status, quarters);
}

　缺點：防抖函數每次會在設定時間內 記錄最后一次點擊，然后開始計時，會增加業務場景中的等待時間；

3.js控制變量

全局設置一個變量 或者state變量儲存

// 按鈕事件
handleBtn = () => {
	if(isClick) {
            isClick = false;
            //事件
            //定時器
            setTimeout(function() {
                isClick = true;
            }, 3000);//3秒內不能重復點擊
	    //執行代碼塊

        }else{
	 message.warning("請勿重復點擊！")
      }
}

　　效果：