"锁"

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

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

 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）

说白了也就是，有 过程 的都需要一个“锁”。

　　　　　　　“锁”是为了防止用户狂点。

posted @ 2017-03-21 17:25  晨落梦公子  阅读(157)  评论(0)  编辑  收藏  举报