微信小程序如何避免按鈕多次點擊重復觸發(fā)事件

　　?比如頁面有一個form表單，快速重復點擊兩次提交按鈕，你會發(fā)現(xiàn)提交了數(shù)據(jù)兩次，這種現(xiàn)象在正常情況下不會發(fā)生，只有當網(wǎng)絡非常不好或者手機設備實在太差的時候才會發(fā)生。當作為一個嚴謹完美的應用，這種情況是不應該發(fā)生，那么如何避免按鈕多次點擊重復觸發(fā)事件呢？中企動力參考微信小程序開發(fā)文檔以及網(wǎng)絡搜索找到了如下幾個方法：

　　方法

　　一、解決問題主要思路是當按鈕被第一次點擊時，設置按鈕disabled屬性為true，從而避免被再次點擊。方法解決步驟如下：

　　1、增加頁面data參數(shù)disabled，這個參數(shù)名可自己隨意定義，設置初始值為false;

　　2、頁面綁定按鈕disabled屬性，具體代碼片段發(fā)布;

　　3、當事件執(zhí)行開始時，加入代碼this.setData({disabled：true})，就是設置按鈕為不可用；

　　4、事件執(zhí)行完畢，重新初始化按鈕disabled屬性，有兩種情況：如果事件執(zhí)行完頁面發(fā)生跳轉如navigateTo當返回的時候，你會發(fā)覺按鈕不可用，這時候

　　需要在onShow事件加入代碼

　　onShow：function(){

　　this.setData({disabled：false})

　　}

　　如果頁面不需要跳轉，直接在事件執(zhí)行完畢的時候加入this.setData({disabled：false})

　　這時候你會問，為什么不都在事件執(zhí)行完畢時候設置disabled為false.當頁面發(fā)生跳轉的時候不好用，我自己測試過。

　　方法

　　二、通過設置遮罩層，當按鈕被第一次點擊的時候，彈出一個遮罩層遮擋按鈕被再次點擊，這種方法需要自己定義一個遮罩層，可通過一個data屬性來控制是否顯示，具體執(zhí)行步驟和方法一類似。

　　方法

　　三、不通過遮罩層和按鈕disable屬性，直接通過變量來控制是否執(zhí)行事件，具體代碼大致如下：

　　1、設置參數(shù)is_first_action為true

　　2、事件執(zhí)行前設置is_first_action為false，然后執(zhí)行事件時判斷is_first_action是否為true，否則不執(zhí)行

　　3、執(zhí)行完初始化is_first_action為true

　　以上三種方法相同點都是通過data屬性來判斷是非是第一次執(zhí)行，不同點在于界面展示，其中第一種可能只適合按鈕，而第二種和第三種方法適合圖片或者文字觸發(fā)的事件。

　　還有一種特別的重復觸況時，當按鈕需要定義單擊、雙擊和長按事件時，單擊、雙擊和長按是三種不同的事件，雖然小程序通過兩個事件參數(shù)執(zhí)行不同事件，但是有個BUG就是當雙擊和長按的時候都會觸發(fā)單擊事件。如何解決這個問題可參考中企動力的文章《微信小程序點擊事件重復觸發(fā)如何解決》

　　微信小程序發(fā)布一年多以來，說實話，BUG還是挺多的，不過修補也很積極，經(jīng)常深更半夜更新新的功能或者修復BUG，這點還是值得學習的。