摘要：上面是全局锁最核心的功能，当然就是上锁这个操作啦。满足这样一系列的条件，我们认为这个锁是可释放或已释放的。所以在调用时会重置锁的配置，并且让表明此次调用不在上锁状态，可以继续往下执行。
看到页面上有个按钮不知大家是否有疯狂点击的冲动？请善待我们前端开发，不要轻易多次点击页面上的按钮（开玩笑~
在网页开发的过程中，秉着保护自己不信任用户的原则，我们有必要在某些会被频繁触发的按钮或者热区加上“锁”，这里的锁指的是短时间内不允许多次点击按钮。
它到底会导致怎样的后果？举一个常见的栗子：
商品详情页中的购买按钮，倘若没有对用户的点击行为作出相应的限制，可能会产生以下结果--
用户可能会重复下单并生成多张订单
点击频率过大把下单接口刷爆了
还可能会出现未知的体验性问题
......
这只是其中一个会涉及用户点击的场景，试想在一个较为复杂的表单页面可能会有很多的可点击项，如果不在全局的层面对点击加以限制，可能会对整个页面造成不可估量的影响。
那么，应该怎么锁？核心很简单--在调用方法前或执行方法前将锁注册好，下次调用方法时去查看锁是否已释放，如果释放则照常运行，否则跳出方法不再往下执行。
下面让我们跟着代码来看，这个锁应该怎么实现--
首先，我们先对全局锁进行一些基础变量的定义，为了方便锁状态的还原，在最开始定义了defalutLockOption，也就是全局锁方法的默认数据。紧接着是lockOption，后面对于锁操作所需的数据都在这里取或者修改.reloadOption则是对锁状态复原的方法，具体变量含义在图里都有展示。
上面是全局锁最核心的功能，当然就是“上锁”这个操作啦。它接受两个参数--是否自动释放锁、自动释放锁的时间。但是大家会发现，在设定释放时间的时候我还是写了10000ms，这样做是为了避免某些没能手动取消锁导致的页面无法点击情况。
介绍一下第一个判断的条件，如果lockOption的endTime有值并且已经过了释放锁的时间最后是当前锁的状态是锁上的。满足这样一系列的条件，我们认为这个锁是“可释放”或“已释放”的。所以在调用lock()时会重置锁的配置，并且让_lockStatus = false（表明此次调用不在上锁状态，可以继续往下执行）。
紧接着下一个判断条件，_lockStatus实际指的是调用lock()时全局锁的实际状态，倘若在调用lock()时，锁在释放状态则会将锁的状态更改，并设定好释放锁的时间。随后return _lockStatus 注意，这里并非return lockOption.lockStatus。
光看文字可能有点绕，我总结了一张示意图，完整的展示事件未锁--锁--释放锁的过程:
该怎么使用它？上面只是其中的一种情景，实际上所有的可点击区域都可以用这种模式限制触发频率。点击直达demo，源码以及实现效果都可以直观的看到~如果绕住了可以配合前面的解析看看。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/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...
阅读 1601·2021-11-22 13:53
阅读 2835·2021-11-15 18:10
阅读 2738·2021-09-23 11:21
阅读 2472·2019-08-30 15:55
阅读 463·2019-08-30 13:02
阅读 740·2019-08-29 17:22
阅读 1609·2019-08-29 13:56
阅读 3443·2019-08-29 11:31
