摘要：上面是全局鎖最核心的功能，當(dāng)然就是上鎖這個(gè)操作啦。滿足這樣一系列的條件，我們認(rèn)為這個(gè)鎖是可釋放或已釋放的。所以在調(diào)用時(shí)會(huì)重置鎖的配置，并且讓表明此次調(diào)用不在上鎖狀態(tài)，可以繼續(xù)往下執(zhí)行。

看到頁(yè)面上有個(gè)按鈕不知大家是否有瘋狂點(diǎn)擊的沖動(dòng)？請(qǐng)善待我們前端開(kāi)發(fā)，不要輕易多次點(diǎn)擊頁(yè)面上的按鈕（開(kāi)玩笑~

在網(wǎng)頁(yè)開(kāi)發(fā)的過(guò)程中，秉著保護(hù)自己不信任用戶的原則，我們有必要在某些會(huì)被頻繁觸發(fā)的按鈕或者熱區(qū)加上“鎖”，這里的鎖指的是短時(shí)間內(nèi)不允許多次點(diǎn)擊按鈕。

它到底會(huì)導(dǎo)致怎樣的后果？舉一個(gè)常見(jiàn)的栗子：

商品詳情頁(yè)中的購(gòu)買(mǎi)按鈕，倘若沒(méi)有對(duì)用戶的點(diǎn)擊行為作出相應(yīng)的限制，可能會(huì)產(chǎn)生以下結(jié)果--

用戶可能會(huì)重復(fù)下單并生成多張訂單

點(diǎn)擊頻率過(guò)大把下單接口刷爆了

還可能會(huì)出現(xiàn)未知的體驗(yàn)性問(wèn)題

......

這只是其中一個(gè)會(huì)涉及用戶點(diǎn)擊的場(chǎng)景，試想在一個(gè)較為復(fù)雜的表單頁(yè)面可能會(huì)有很多的可點(diǎn)擊項(xiàng)，如果不在全局的層面對(duì)點(diǎn)擊加以限制，可能會(huì)對(duì)整個(gè)頁(yè)面造成不可估量的影響。

核心很簡(jiǎn)單--在調(diào)用方法前或執(zhí)行方法前將鎖注冊(cè)好，下次調(diào)用方法時(shí)去查看鎖是否已釋放，如果釋放則照常運(yùn)行，否則跳出方法不再往下執(zhí)行。

下面讓我們跟著代碼來(lái)看，這個(gè)鎖應(yīng)該怎么實(shí)現(xiàn)--

首先，我們先對(duì)全局鎖進(jìn)行一些基礎(chǔ)變量的定義，為了方便鎖狀態(tài)的還原，在最開(kāi)始定義了defalutLockOption，也就是全局鎖方法的默認(rèn)數(shù)據(jù)。緊接著是lockOption，后面對(duì)于鎖操作所需的數(shù)據(jù)都在這里取或者修改.reloadOption則是對(duì)鎖狀態(tài)復(fù)原的方法，具體變量含義在圖里都有展示。

上面是全局鎖最核心的功能，當(dāng)然就是“上鎖”這個(gè)操作啦。它接受兩個(gè)參數(shù)--是否自動(dòng)釋放鎖、自動(dòng)釋放鎖的時(shí)間。但是大家會(huì)發(fā)現(xiàn)，在設(shè)定釋放時(shí)間的時(shí)候我還是寫(xiě)了10000ms，這樣做是為了避免某些沒(méi)能手動(dòng)取消鎖導(dǎo)致的頁(yè)面無(wú)法點(diǎn)擊情況。

介紹一下第一個(gè)判斷的條件，如果lockOption的endTime有值并且已經(jīng)過(guò)了釋放鎖的時(shí)間最后是當(dāng)前鎖的狀態(tài)是鎖上的。滿足這樣一系列的條件，我們認(rèn)為這個(gè)鎖是“可釋放”或“已釋放”的。所以在調(diào)用lock()時(shí)會(huì)重置鎖的配置，并且讓_lockStatus = false（表明此次調(diào)用不在上鎖狀態(tài)，可以繼續(xù)往下執(zhí)行）。

緊接著下一個(gè)判斷條件，_lockStatus實(shí)際指的是調(diào)用lock()時(shí)全局鎖的實(shí)際狀態(tài)，倘若在調(diào)用lock()時(shí)，鎖在釋放狀態(tài)則會(huì)將鎖的狀態(tài)更改，并設(shè)定好釋放鎖的時(shí)間。隨后return _lockStatus 注意，這里并非return lockOption.lockStatus。

光看文字可能有點(diǎn)繞，我總結(jié)了一張示意圖，完整的展示事件未鎖--鎖--釋放鎖的過(guò)程:

上面只是其中的一種情景，實(shí)際上所有的可點(diǎn)擊區(qū)域都可以用這種模式限制觸發(fā)頻率。點(diǎn)擊直達(dá)demo，源碼以及實(shí)現(xiàn)效果都可以直觀的看到~如果繞住了可以配合前面的解析看看。