引子
當(dāng)我們針對(duì)某個(gè)按鈕綁定點(diǎn)擊事件后，就可以隨時(shí)通過點(diǎn)擊鼠標(biāo)來觸發(fā)按鈕的點(diǎn)擊事件捺典，如：
var num = 1;
$('ele').on('click',function(){
num++;
//執(zhí)行的業(yè)務(wù)邏輯
})
這樣num值會(huì)不斷增加娇斩，依賴于num值的業(yè)務(wù)邏輯就會(huì)出錯(cuò)茅主；
一般出現(xiàn)的場(chǎng)景有：
- ajax請(qǐng)求;
- 問卷答題
接下來我們根據(jù)這些場(chǎng)景來分析下;
場(chǎng)景分析
1. ajax提交
<script async src="http://jsrun.net/ejZKp/embed/all/light/"></script>
當(dāng)用戶短時(shí)間內(nèi)重復(fù)點(diǎn)擊登錄按鈕時(shí),會(huì)觸發(fā)多次的表單提交;
解決方案: 當(dāng)點(diǎn)擊提交按鈕后,給按鈕添加disabled屬性,事件完成后再removeAttr('disabled')
<script async src="http://jsrun.net/tjZKp/embed/all/light/"></script>
2. 問卷答題
<script async src="http://jsrun.net/RjZKp/embed/all/light/"></script>
當(dāng)選擇一個(gè)答案時(shí),重復(fù)點(diǎn)擊,機(jī)會(huì)造成num重復(fù)增加,可能會(huì)造成中間某些選題未答直接跳到后面的答題部念，而添加一個(gè)name數(shù)組判斷是否重復(fù)就可以避免該問題;
<script async src="http://jsrun.net/rjZKp/embed/all/light/"></script>
總結(jié)
解決重復(fù)點(diǎn)擊問題可以歸結(jié)為標(biāo)記作用位點(diǎn)弃酌，有兩種方法:
- 點(diǎn)擊觸發(fā)請(qǐng)求后，作用點(diǎn)設(shè)為disabled屬性儡炼，請(qǐng)求（或者包括請(qǐng)求后具體的業(yè)務(wù)流程處理）后妓湘，移除disabled屬性；
- 記錄作用點(diǎn)乌询，判斷作用點(diǎn)是否重復(fù)榜贴，重復(fù)則直接return
其實(shí)ajax還有一個(gè)更好的方法來避免重復(fù)提交,我們知道js是單線程執(zhí)行事件的,所以可以根據(jù)此原理定義事件序列，重新封裝ajax方法來避免妹田。
詳細(xì)見我的個(gè)人博客:鏈接
