前端頁面全局鎖(Lab小技巧-004)

看到頁面上有個按鈕不知你們是否有瘋狂點擊的衝動？請善待咱們前端開發，不要輕易屢次點擊頁面上的按鈕（開玩笑~

在網頁開發的過程當中，秉着保護本身不信任用戶的原則，咱們有必要在某些會被頻繁觸發的按鈕或者熱區加上「鎖」，這裏的鎖指的是短期內不容許屢次點擊按鈕。

首先，有必要說一下重複點擊這個事

它到底會致使怎樣的後果？舉一個常見的栗子：

商品詳情頁中的購買按鈕，假若沒有對用戶的點擊行爲做出相應的限制，可能會產生如下結果--

• 用戶可能會重複下單並生成多張訂單
• 點擊頻率過大把下單接口刷爆了
• 還可能會出現未知的體驗性問題
• ......

這只是其中一個會涉及用戶點擊的場景，試想在一個較爲複雜的表單頁面可能會有不少的可點擊項，若是不在全局的層面對點擊加以限制，可能會對整個頁面形成不可估量的影響。

那麼，應該怎麼鎖？

核心很簡單--在調用方法前或執行方法前將鎖註冊好，下次調用方法時去查看鎖是否已釋放，若是釋放則照常運行，不然跳出方法再也不往下執行。

下面讓咱們跟着代碼來看，這個鎖應該怎麼實現--

首先，咱們先對全局鎖進行一些基礎變量的定義，爲了方便鎖狀態的還原，在最開始定義了defalutLockOption，也就是全局鎖方法的默認數據。緊接着是lockOption，後面對於鎖操做所需的數據都在這裏取或者修改.reloadOption則是對鎖狀態復原的方法，具體變量含義在圖裏都有展現。

上面是全局鎖最核心的功能，固然就是「上鎖」這個操做啦。它接受兩個參數--是否自動釋放鎖、自動釋放鎖的時間。可是你們會發現，在設定釋放時間的時候我仍是寫了10000ms，這樣作是爲了不某些沒能手動取消鎖致使的頁面沒法點擊狀況。

介紹一下第一個判斷的條件，若是lockOption的endTime有值而且已經過了釋放鎖的時間最後是當前鎖的狀態是鎖上的。知足這樣一系列的條件，咱們認爲這個鎖是「可釋放」或「已釋放」的。因此在調用lock()時會重置鎖的配置，而且讓_lockStatus = false（代表這次調用不在上鎖狀態，能夠繼續往下執行）。

緊接着下一個判斷條件，_lockStatus實際指的是調用lock()時全局鎖的實際狀態，假若在調用lock()時，鎖在釋放狀態則會將鎖的狀態更改，並設定好釋放鎖的時間。隨後return _lockStatus 注意，這裏並不是return lockOption.lockStatus。

光看文字可能有點繞，我總結了一張示意圖，完整的展現事件未鎖--鎖--釋放鎖的過程:

該怎麼使用它？

上面只是其中的一種情景，實際上全部的可點擊區域均可以用這種模式限制觸發頻率。點擊直達demo，源碼以及實現效果均可以直觀的看到~若是繞住了能夠配合前面的解析看看。