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

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

 <!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. 让nodejs在iis上运行

    node在IIS上运行的好处: Tomasz的回答是我见过最棒的: 使用iisnode模块在IIS中托管node.js应用程序来取代自托管node.exe进程的优势在于: · 进程管理. Iisnod ...

  2. iOS 可能用到的三方框架

    1.MWPhotoBrowser 第三方图片浏览器 https://github.com/mwaterfall/MWPhotoBrowser 2.SlackTextViewController  强大 ...

  3. 2018-2019 2 20165210 《网络对抗技术》Exp5 MSF基础

    2018-2019 2 20165210 <网络对抗技术>Exp5 MSF基础 实验内容: 一个主动攻击实践,如ms08_067(成功); 一个针对浏览器的攻击,如ms10_046(成功) ...

  4. LINUX系统下APACHE中的CGI应用

    该实验环境是在APACHE的配置内容的基础上实现的! 1.安装软件: yum install  php  -y      ##安装完成后,可以在/etc/httpd/conf.d/目录下查看,有php ...

  5. Linux之sshd服务

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

  6. JVM的理解

    1.Java程序是交由JVM执行的,所以我们在谈Java内存区域划分的时候事实上是指JVM内存区域划分.在讨论JVM内存区域划分之前,先来看一下Java程序具体执行的过程: 也相当与 注:JVM(ja ...

  7. C语言学习之指针

    指针这块,看了好久才有点头绪,稍微有点理解了. 一.指针申明以及赋值 int *p; 这样就声明了一个int型的指针p,这个p就是指针变量,可能上述的书写方式会混淆我们队指针的理解(*号) 我们可以这 ...

  8. caffe学习5——Model initialization and Model format

    参考文献 1 用Net::Init().做了两件事:一.绑架所有的layers和blobs,调用 layers’SetUp() 函数.验证全部网络的正确性等一系列琐碎的事.二.初始化时给出一些日志信息 ...

  9. 流形-Manifold

    流形,也就是 Manifold .不知道你有没有为我在本文开头放上的那个地球的图片感到困惑?这是因为球面是一个很典型的流形的例子,而地球就是一个很典型的“球面”啦(姑且当作球面好啦). 有时候经常会在 ...

  10. discuz数据库迁移，改密码后，相关配置文件修改

    网上看到这篇文章,觉得有用就收藏下 网站系统需要修改的位置有两处 Discuz 和 UC-center ①路径:/wwwroot/config/config_global.php 这个根据你网站安装的 ...