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

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

 <!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. js jq 主动触发事件

    js的自定义事件与触发 //主动触发事件:触发鼠标被按下事件 var btn2 =document.getElementById("btn2"); var btn = docume ...

  2. OC-字符串、数组、字典总结

    #import <Foundation/Foundation.h> /* ∆以NSMutable开头的都是可变类型,以NSMutable开头定义的对象都是可以对数据进行修改: NSStri ...

  3. L155

    Wireless Festival has been given permission to remain in London's Finsbury Park, provided performers ...

  4. Linux之sshd服务

    ---恢复内容开始--- ---恢复内容结束--- 一.linux中对服务管理与控制(以sshd为例) 1.什么是服务 可以用来给客户提供相关操作,对自己没有什么好处 2.用什么控制服务 系统初始化进 ...

  5. 浅析Symbol

    不知道大家有没有留意ES6中的Symbol函数?在此之前,我对Symbol的认识知识这样的:  一.Symbol()和Symbol.for('str') Symbol()是独一无二的,你无法创建两个相 ...

  6. JDK 1.8之 HashMap 源码分析

    转载请注明出处:http://blog.csdn.net/crazy1235/article/details/75579654 构造函数 Node hash put treeifyBin get re ...

  7. Java8安装配置

    方法1．命令行安装 -jdk 存在多个版本,自动配置: sudo update-alternatives --config java 方法2．下载安装 下载java8的jdk http://www.o ...

  8. 获取SQL Server数据库表的列名

    SELECT syscolumns.name,systypes.name,syscolumns.isnullable,syscolumns.length FROM syscolumns, systyp ...

  9. 滑动ViewPager引起swiperefreshlayout刷新的冲突

    ViewPager是Android中提供的页面切换的控件,SwipeRefreshLayout是Android提供的下拉刷新控件,通过SwipeRefreshLayout可以很简单的实现下拉刷新的功能 ...

  10. Java [Leetcode 387]First Unique Character in a String

    题目描述: Given a string, find the first non-repeating character in it and return it's index. If it does ...