国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

elliott_hu / 731人閱讀

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

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

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

首先，有必要說一下重復(fù)點(diǎn)擊這個事

它到底會導(dǎo)致怎樣的后果？舉一個常見的栗子：

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

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

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

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

......

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

那么，應(yīng)該怎么鎖？

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

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

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

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

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

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

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

該怎么使用它？

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/6750.html

相關(guān)文章

  • 簡單策略讓前端資源實(shí)現(xiàn)高可用

    摘要：署名國際本文作者蘇洋創(chuàng)建時(shí)間年月日統(tǒng)計(jì)字?jǐn)?shù)字閱讀時(shí)間分鐘閱讀本文鏈接簡單策略讓前端資源實(shí)現(xiàn)高可用前幾天有朋友問我，曾經(jīng)在前公司里使用過的前端資源高可用方案是怎么做的。本文使用「署名 4.0 國際 (CC BY 4.0)」許可協(xié)議，歡迎轉(zhuǎn)載、或重新修改使用，但需要注明來源。 署名 4.0 國際 (CC BY 4.0) 本文作者: 蘇洋 創(chuàng)建時(shí)間: 2019年05月14日 統(tǒng)計(jì)字?jǐn)?shù): 6024字...

    instein 評論0 收藏0

  • 「前端早讀君004」函數(shù)柯里化（Currying）小實(shí)踐

    摘要：更安全地藏私房錢實(shí)際上，每天記錄下當(dāng)前的數(shù)據(jù)是不靈活的，而函數(shù)柯里化則有效地解決了這個問題。而且不定時(shí)舉辦活動贈送書籍哦 什么是函數(shù)柯里化 在計(jì)算機(jī)科學(xué)中，柯里化（Currying）是把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)(最初函數(shù)的第一個參數(shù))的函數(shù)，并且返回接受余下的參數(shù)且返回結(jié)果的新函數(shù)的技術(shù)。這個技術(shù)由 Christopher Strachey 以邏輯學(xué)家 Haskell ...

    Barry_Ng 評論0 收藏0

  • 「前端早讀君004」函數(shù)柯里化（Currying）小實(shí)踐

    摘要：更安全地藏私房錢實(shí)際上，每天記錄下當(dāng)前的數(shù)據(jù)是不靈活的，而函數(shù)柯里化則有效地解決了這個問題。而且不定時(shí)舉辦活動贈送書籍哦 什么是函數(shù)柯里化 在計(jì)算機(jī)科學(xué)中，柯里化（Currying）是把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)(最初函數(shù)的第一個參數(shù))的函數(shù)，并且返回接受余下的參數(shù)且返回結(jié)果的新函數(shù)的技術(shù)。這個技術(shù)由 Christopher Strachey 以邏輯學(xué)家 Haskell ...

    light 評論0 收藏0

  • 你不知道的Chrome DevTools（2）：那些debug的技巧

    摘要：我打算把一些上使用的高級技巧寫成你不知道的這一系列的博文，希望大家一起學(xué)習(xí)學(xué)習(xí)。然而，這還不是最嚴(yán)重的，因?yàn)榈恼Z法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有。總結(jié)前端在調(diào)試代碼的時(shí)候，知道開發(fā)工具上的小技巧，可以提高查找問題的效率。 Web前端開發(fā)過程中必然會用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔...

    warnerwu 評論0 收藏0

  • 前端技術(shù) 博客文章、書籍 積累

    摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計(jì)怎樣進(jìn)行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計(jì)》《JavaScript框架設(shè)計(jì)》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計(jì)模式》《J...

    LiangJ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<