資訊專欄INFORMATION COLUMN
摘要：上面是全局鎖最核心的功能，當然就是上鎖這個操作啦。滿足這樣一系列的條件，我們認為這個鎖是可釋放或已釋放的。所以在調用時會重置鎖的配置，并且讓表明此次調用不在上鎖狀態，可以繼續往下執行。
看到頁面上有個按鈕不知大家是否有瘋狂點擊的沖動？請善待我們前端開發，不要輕易多次點擊頁面上的按鈕（開玩笑~
在網頁開發的過程中，秉著保護自己不信任用戶的原則，我們有必要在某些會被頻繁觸發的按鈕或者熱區加上“鎖”，這里的鎖指的是短時間內不允許多次點擊按鈕。
它到底會導致怎樣的后果？舉一個常見的栗子：
商品詳情頁中的購買按鈕，倘若沒有對用戶的點擊行為作出相應的限制，可能會產生以下結果--
用戶可能會重復下單并生成多張訂單
點擊頻率過大把下單接口刷爆了
還可能會出現未知的體驗性問題
......
這只是其中一個會涉及用戶點擊的場景，試想在一個較為復雜的表單頁面可能會有很多的可點擊項，如果不在全局的層面對點擊加以限制，可能會對整個頁面造成不可估量的影響。
那么，應該怎么鎖？核心很簡單--在調用方法前或執行方法前將鎖注冊好，下次調用方法時去查看鎖是否已釋放，如果釋放則照常運行，否則跳出方法不再往下執行。
下面讓我們跟著代碼來看，這個鎖應該怎么實現--
首先，我們先對全局鎖進行一些基礎變量的定義，為了方便鎖狀態的還原，在最開始定義了defalutLockOption，也就是全局鎖方法的默認數據。緊接著是lockOption，后面對于鎖操作所需的數據都在這里取或者修改.reloadOption則是對鎖狀態復原的方法，具體變量含義在圖里都有展示。
上面是全局鎖最核心的功能，當然就是“上鎖”這個操作啦。它接受兩個參數--是否自動釋放鎖、自動釋放鎖的時間。但是大家會發現，在設定釋放時間的時候我還是寫了10000ms，這樣做是為了避免某些沒能手動取消鎖導致的頁面無法點擊情況。
介紹一下第一個判斷的條件，如果lockOption的endTime有值并且已經過了釋放鎖的時間最后是當前鎖的狀態是鎖上的。滿足這樣一系列的條件，我們認為這個鎖是“可釋放”或“已釋放”的。所以在調用lock()時會重置鎖的配置，并且讓_lockStatus = false（表明此次調用不在上鎖狀態，可以繼續往下執行）。
緊接著下一個判斷條件，_lockStatus實際指的是調用lock()時全局鎖的實際狀態，倘若在調用lock()時，鎖在釋放狀態則會將鎖的狀態更改，并設定好釋放鎖的時間。隨后return _lockStatus 注意，這里并非return lockOption.lockStatus。
光看文字可能有點繞，我總結了一張示意圖，完整的展示事件未鎖--鎖--釋放鎖的過程:
該怎么使用它？上面只是其中的一種情景，實際上所有的可點擊區域都可以用這種模式限制觸發頻率。點擊直達demo，源碼以及實現效果都可以直觀的看到~如果繞住了可以配合前面的解析看看。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6750.html
摘要：署名國際本文作者蘇洋創建時間年月日統計字數字閱讀時間分鐘閱讀本文鏈接簡單策略讓前端資源實現高可用前幾天有朋友問我，曾經在前公司里使用過的前端資源高可用方案是怎么做的。本文使用「署名 4.0 國際 (CC BY 4.0)」許可協議，歡迎轉載、或重新修改使用，但需要注明來源。 署名 4.0 國際 (CC BY 4.0) 本文作者: 蘇洋 創建時間: 2019年05月14日 統計字數: 6024字...
摘要：更安全地藏私房錢實際上，每天記錄下當前的數據是不靈活的，而函數柯里化則有效地解決了這個問題。而且不定時舉辦活動贈送書籍哦 什么是函數柯里化 在計算機科學中，柯里化（Currying）是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數，并且返回接受余下的參數且返回結果的新函數的技術。這個技術由 Christopher Strachey 以邏輯學家 Haskell ...
摘要：更安全地藏私房錢實際上，每天記錄下當前的數據是不靈活的，而函數柯里化則有效地解決了這個問題。而且不定時舉辦活動贈送書籍哦 什么是函數柯里化 在計算機科學中，柯里化（Currying）是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數，并且返回接受余下的參數且返回結果的新函數的技術。這個技術由 Christopher Strachey 以邏輯學家 Haskell ...
摘要：我打算把一些上使用的高級技巧寫成你不知道的這一系列的博文，希望大家一起學習學習。然而，這還不是最嚴重的，因為的語法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有。總結前端在調試代碼的時候，知道開發工具上的小技巧，可以提高查找問題的效率。 Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔...
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行 書籍 《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...
閱讀 1618·2021-11-22 13:53
閱讀 2848·2021-11-15 18:10
閱讀 2755·2021-09-23 11:21
閱讀 2491·2019-08-30 15:55
閱讀 475·2019-08-30 13:02
閱讀 752·2019-08-29 17:22
閱讀 1659·2019-08-29 13:56
閱讀 3455·2019-08-29 11:31
