“锁”，指的是状态切换，状态未切换完成，加上锁，完成后才打开锁。

下面例子要完成一个点击按钮切换颜色的小示例，先看未加“锁”时候的效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>锁</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .box{

             width: 200px;

             height: 200px;

             transition: all 3s;

             -webkit-transition: all 3s;

         }

         .color1{

             background-color: #985f0d;

         }

         .color2{

             background-color: #0BB995;

         }

     </style>

     <script src="../base/jquery-3.1.0.js"></script>

 </head>

 <body>

 <div class="box color1"></div>

 <a class="btn" href="javascript:;">点我移动</a>

 <script>

     $(function () {

         var box = $('.box'),

             btn = $('.btn');

         btn.click(function () {

             box.hasClass('color1') ? box.addClass('color2').removeClass('color1') : box.addClass('color1').removeClass('color2')

         })

     })

 </script>

 </body>

 </html>

具体样式自己cv看就行了。想看出错误，你可以狂点，你会发现，颜色还没变化完成，就又开始变化了。

而开发的时候，是不允许用户狂点的，但是你又不能告诉用户，“你可别狂点啊”。想要防止用户狂点，就得在代码上面做些手段了。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>锁</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         .box {

             width: 200px;

             height: 200px;

             transition: all 3s;

             -webkit-transition: all 3s;

         }

         .color1 {

             background-color: #985f0d;

         }

         .color2 {

             background-color: #0BB995;

         }

     </style>

     <script src="../base/jquery-3.1.0.js"></script>

 </head>

 <body>

 <div class="box color1"></div>

 <a class="btn" href="javascript:;">点我移动</a>

 <script>

     $(function () {

         var box = $('.box'),

             btn = $('.btn'),

             changing = false;

         btn.click(function () {

             if (changing) return false;

             changing = true;

             if (box.hasClass('color1')) {

                 box.removeClass('color1').addClass('color2');

                 box.on('webkitTransitionEnd otransitionend transitionend', function () {

                     changing = false;

                 })

             } else if (box.hasClass('color2')) {

                 box.removeClass('color2').addClass('color1');

                 box.on('webkitTransitionEnd otransitionend transitionend', function () {

                     changing = false;

                 })

             }

         })

     })

 </script>

 </body>

 </html>

现在，我就能跟用户说一句，‘来啊，快(kuang)活(jian)啊’。

“锁”适用情况：

　　1、ajax提交

　　2、动画（翻牌、轮播图、方块移动etc）

说白了也就是，有 过程 的都需要一个“锁”。

　　　　　　　“锁”是为了防止用户狂点。

"锁"的更多相关文章

  1. 使用redis构建可靠分布式锁

    关于分布式锁的概念,具体实现方式,直接参阅下面两个帖子,这里就不多介绍了. 分布式锁的多种实现方式 分布式锁总结 对于分布式锁的几种实现方式的优劣,这里再列举下 1. 数据库实现方式 优点:易理解 缺 ...

  2. 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁，Atomic原子类)

    前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...

  3. java中的锁

    java中有哪些锁 这个问题在我看了一遍<java并发编程>后尽然无法回答,说明自己对于锁的概念了解的不够.于是再次翻看了一下书里的内容,突然有点打开脑门的感觉.看来确实是要学习的最好方式 ...

  4. 分布式锁1 Java常用技术方案

    前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分布式场景下数据一致性的问题,那么就要利用分布式锁来解决这些问题.所以自己结合实际工作中的一些经验和网上看到的一些资 ...

  5. 如何在高并发环境下设计出无锁的数据库操作（Java版本）

    一个在线2k的游戏,每秒钟并发都吓死人.传统的hibernate直接插库基本上是不可行的.我就一步步推导出一个无锁的数据库操作. 1. 并发中如何无锁. 一个很简单的思路,把并发转化成为单线程.Jav ...

  6. 如何定位Oracle数据库被锁阻塞会话的根源

    首先再次明确下,数据库因为要同时保证数据的并发性和一致性,所以操作有锁等待是正常的. 只有那些长时间没有提交或回滚的事物,阻塞了其他业务正常操作,才是需要去定位处理的. 1.单实例环境 2.RAC环境 ...

  7. java 线程 Lock 锁使用Condition实现线程的等待（await）与通知(signal)

    一.Condition 类 在前面我们学习与synchronized锁配合的线程等待(Object.wait)与线程通知(Object.notify),那么对于JDK1.5 的 java.util.c ...

  8. Android 死锁和重入锁

    死锁的定义: 1.一般的死锁 一般的死锁是指多个线程的执行必须同时拥有多个资源,由于不同的线程需要的资源被不同的线程占用,最终导致僵持的状态,这就是一般死锁的定义. package com.cxt.t ...

  9. Xcode 锁终端

    锁终端 输入: <1>cd /Applications/Xcode.app 回车 结果显示: Xcode.app 输入: <2>sudo chown -hR root:whee ...

  10. mysql 行级锁的使用以及死锁的预防

    一.前言 mysql的InnoDB,支持事务和行级锁,可以使用行锁来处理用户提现等业务.使用mysql锁的时候有时候会出现死锁,要做好死锁的预防. 二.MySQL行级锁 行级锁又分共享锁和排他锁. 共 ...

随机推荐

  1. codis3.2安装配置中的一些问题

    1.参考文档与参考资料问题 安装codis集群之前,我先在网上找资料,然后又到github的项目官方地址找,不得不说,相关的资料不好找,而且找到之后有些东西说的也不是很清楚.由于codis版本迭代的问 ...

  2. Linux服务器静态路由配置

    转载自:点击打开链接 静态路由是在路由器中设置的固定的路由表.除非网络管理员干预,否则静态路由不会发生变化.由于静态路由不能对网络的改变作出反映,一般用于网络规模不大.拓扑结构固定的网络中.静态路由的 ...

  3. 有关项目依赖包发生 Manifest Merge 冲突的详细解决方案

    安卓开发使用 Gradle 插件管理依赖包确实非常方便,尤其是在解决一些依赖冲突的问题上.比如,重复依赖的问题,具体内容请我之前写的一篇文章: 有关 Android Studio 重复引入包的问题和解 ...

  4. PHP中查看PHP基本信息

    1.PHP_BINARY:查看PHP执行exe文件路径 <?php echo PHP_BINARY; ?> E:\PHP\php-7.1.3-Win32-VC14-x64\php.exe ...

  5. 我也说说Emacs吧(2) - Emacs其实就是函数的组合

    Emacs本质上是函数的组合 从帮助上看emacs有何不同 Vim和Sublime Text等编辑器,本质上是一个编辑器. 比如我们看看vim的帮助,是这个风格的,比如我要看i命令的帮助: <i ...

  6. clean-css 安装 使用

    https://github.com/jakubpawlowicz/clean-css-cli https://davidwalsh.name/clean-css

  7. iOS如何限制使用SDK的版本？ 解决iOS项目的版本兼容问题

      更新 2015-11-16 感谢微博好友@zyyy_000的评论,补充了为什么要在+ (void)load方法里面做Method Swizzling. 前言 最近,在做项目时,因为某种原因,突然要 ...

  8. postfix邮件服务器搭建03-webmail安装篇

    本文接着上文的安装进行,介绍另一个WebMail功能更加人性化的roundcube.当然也可以对已有的postfix邮件系统进行功能完善 1.下载安装roundcube cd /server/tool ...

  9. 【剑指offer】反转链表，C++实现（链表）

    1.题目 输入一个链表的头结点,首先反转链表后,然后输出链表的所有元素(牛客网). struct ListNode { int val; struct ListNode *next; }; 2.思路 ...

  10. Android中的关于MDM中的几个方法举例

    Android中的关于MDM中的几个方法举例 首先介绍一下MDM是什么的缩写,MDM是什么? MDM 是 (Mobile Device Management )的缩写,中文翻译过来就是移动设备管理.随 ...