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

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

 <!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. Android6.0之后的权限机制对App开发的影响

    随着Android系统的更新换代,每次重大更新的方面也逐步扩展,从4.*主要是增强功能,到5.*主要是美化界面,到6.*主要提高系统安全性,再到7.*和8.*主要支撑各种大屏设备,因此开发者需要对每个 ...

  2. 当创建SDL工程发现“无法解析的外部符号 _SDL_main”出错

    当你创建一个新控制台程序,想调用SDL时,编译时发现如下出错: 1>------ 已启动生成: 项目: caipal, 配置: Debug Win32 ------1>  caipal.c ...

  3. php 路径问题

    今天迁移网站服务器时,路径出错: 解决办法: 在网站首页根目录 设置define 全局变量 ——根目录: 在涉及目录的地方,统统替换为 根目录:

  4. boost split字符串

    boost split string , which is very convenience #include <string> #include <iostream> #in ...

  5. vue 之node.js 02

    文档 铺垫 以前网页制作web1.0 如今是web2.0-->交互式操作 前端工具 grunt gulp webpack :打包机 作用:将项目中的js,css,img,font,html等进行 ...

  6. vuex（一）mutations

    前言:vuex的使用,想必大家也都知道,类似于状态库的东西,存储某种状态,共互不相干的两个组件之间数据的共享传递等.我会分开给大家讲解vuex的使用,了解并掌握vuex的核心(state,mutati ...

  7. C++头文件预编译与命名空间使用方法

    宏指令的预编译用法,用于多文件的头文件预编译判断 头文件代码: #include <iostream> #ifndef XB_H//预编译判断XB_H代码段是否被执行 #define XB ...

  8. POJ3682King Arthur's Birthday Celebration（数学期望||概率DP）

    King Arthur is an narcissist who intends to spare no coins to celebrate his coming K-th birthday. Th ...

  9. hiho 1612

    emmmmm?A不了?90分是什么鬼 #include<cstdio> #include<cstdlib> #include<vector> #include< ...

  10. java运行jar命令提示没有主清单属性和找不到主类

    推荐一个java运行jar命令提示没有主清单属性的百度经验的链接:https://jingyan.baidu.com/article/db55b60990f6084ba30a2fb8.html jav ...