“锁”，指的是状态切换，状态未切换完成，加上锁，完成后才打开锁。
下面例子要完成一个点击按钮切换颜色的小示例，先看未加“锁”时候的效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>锁</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 200px; 13 height: 200px; 14 transition: all 3s; 15 -webkit-transition: all 3s; 16 } 17 .color1{ 18 background-color: #985f0d; 19 } 20 .color2{ 21 background-color: #0BB995; 22 } 23 </style> 24 <script src="../base/jquery-3.1.0.js"></script> 25 </head> 26 <body> 27 <div class="box color1"></div> 28 <a class="btn" href="javascript:;">点我移动</a> 29 <script> 30 $(function () { 31 var box = $('.box'), 32 btn = $('.btn'); 33 34 btn.click(function () { 35 box.hasClass('color1') ? box.addClass('color2').removeClass('color1') : box.addClass('color1').removeClass('color2') 36 }) 37 }) 38 </script> 39 </body> 40 </html>
具体样式自己cv看就行了。想看出错误，你可以狂点，你会发现，颜色还没变化完成，就又开始变化了。
而开发的时候，是不允许用户狂点的，但是你又不能告诉用户，“你可别狂点啊”。想要防止用户狂点，就得在代码上面做些手段了。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>锁</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .box { 13 width: 200px; 14 height: 200px; 15 transition: all 3s; 16 -webkit-transition: all 3s; 17 } 18 19 .color1 { 20 background-color: #985f0d; 21 } 22 23 .color2 { 24 background-color: #0BB995; 25 } 26 </style> 27 <script src="../base/jquery-3.1.0.js"></script> 28 </head> 29 <body> 30 <div class="box color1"></div> 31 <a class="btn" href="javascript:;">点我移动</a> 32 <script> 33 $(function () { 34 var box = $('.box'), 35 btn = $('.btn'), 36 changing = false; 37 38 btn.click(function () { 39 if (changing) return false; 40 changing = true; 41 42 if (box.hasClass('color1')) { 43 box.removeClass('color1').addClass('color2'); 44 box.on('webkitTransitionEnd otransitionend transitionend', function () { 45 changing = false; 46 }) 47 } else if (box.hasClass('color2')) { 48 box.removeClass('color2').addClass('color1'); 49 box.on('webkitTransitionEnd otransitionend transitionend', function () { 50 changing = false; 51 }) 52 } 53 }) 54 }) 55 </script> 56 </body> 57 </html>
现在，我就能跟用户说一句，‘来啊，快(kuang)活(jian)啊’。
“锁”适用情况：
1、ajax提交
2、动画（翻牌、轮播图、方块移动etc）
说白了也就是，有 过程 的都需要一个“锁”。
“锁”是为了防止用户狂点。