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

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

 <!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. python3 快速排序

    思路 第一步:找到一个随机的数,一般都是第一个数,也就是left,递归中也用left,放到缓存中,专业叫 基准值,基准值是要放在中间的. 第二步:最左边空出一个位置就是索引left的位置,所以从右向左 ...

  2. maven手动添加jar（转）

    Maven 手动添加 JAR 包到本地仓库 原文链接:http://www.blogjava.net/fancydeepin/archive/2012/06/12/380605.html Maven ...

  3. 剑指offer--38.左旋转字符串

    时间限制:1秒 空间限制:32768K 热度指数:173814 本题知识点: 字符串 题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果. ...

  4. yii2.0 高级版 restful api使用

    1.复制任意个目录(backend)为api 2.打开api下的main.php 修改 id=>app-api,'controllerNamespace' => 'api\controll ...

  5. Android 开发 Tip 17 -- 为什么getBackground().setAlpha(); 会影响别的控件？

    转载请注明出处:http://blog.csdn.net/crazy1235/article/details/75670018 http://www.jb51.net/article/110035.h ...

  6. libcurl 错误码总结

    下载出现这种错误(Requested range was not delivered by the server  ),说明是重复下载,删掉本地的再下载就不会出现了

  7. 给View 添加手势，点击无反应 如何给View添加点击事件，手势方法

    项目中有很多地方需要添加点击事件,重复代码很多,所以做了一个UIView的分类,专门做点击事件使用.项目地址:UIView-Tap 代码很简单,主要有一点就是注意分类不能直接添加属性,需要用到运行时相 ...

  8. iOS:Core Data 中的简单ORM

    我们首先在xcdatamodel文件中设计我们的数据库:例如我建立一个Data的实体,里面有一个String类型的属性name以及一个Integer类型的num: 然后选中Data,添加文件,选择NS ...

  9. js之留言字数限制

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. apk系统签名命令

    java -jar signapk.jar platform.x509.pem platform.pk8 D:/ClockSetting.apk D:/ClockSettingSigned.apk 需 ...