关于节流阀的理解
前言：总是感叹于自己的记性真的和鱼一样。果然像我这样平凡的人，还是只能靠烂笔头啊。今天记录一下节流阀的思想，和实现方法。
想象一下有一个开关，控制着动画的运行。就像阀一样，阀开着水才能流出。同样的，我们也可以设一个(阀)flag=true;。在事件的开头处，判断if(flag){flag=false;do somenthing}阀打开的情况下运行函数，并且把开着的水龙头关掉flag=false;让事件无法连续触发，最后事件结尾判断动画如果如果结束，再打开阀flag=true。
下面是一个切割轮播图的例子：
html
<body>
<div class="box">
<ul>
<li><img src="imgs/01.jpg" alt=""></li>
<li><img src="imgs/02.jpg" alt=""></li>
<li><img src="imgs/03.jpg" alt=""></li>
<li><img src="imgs/04.jpg" alt=""></li>
</ul>
<ul>
<li><img src="imgs/01.jpg" alt=""></li>
<li><img src="imgs/02.jpg" alt=""></li>
<li><img src="imgs/03.jpg" alt=""></li>
<li><img src="imgs/04.jpg" alt=""></li>
</ul>
<ul>
<li><img src="imgs/01.jpg" alt=""></li>
<li><img src="imgs/02.jpg" alt=""></li>
<li><img src="imgs/03.jpg" alt=""></li>
<li><img src="imgs/04.jpg" alt=""></li>
</ul>
<ul>
<li><img src="imgs/01.jpg" alt=""></li>
<li><img src="imgs/02.jpg" alt=""></li>
<li><img src="imgs/03.jpg" alt=""></li>
<li><img src="imgs/04.jpg" alt=""></li>
</ul>
</div>
<div class="btn-warp">
<a href="javascript:void(0);">点我</a>
<a href="javascript:void(0);">点我</a>
</div>
</body>
css
<style>
*{
padding:0;
margin:0;
}
.box{
560px;
height: 380px;
display: flex;
margin:auto;
}
.box ul{
flex: 1;
list-style-type: none;
25%;
height: 100%;
position: relative;
transform-style: preserve-3d;
}
.box ul:nth-child(2) img{
margin-left: -140px;
}
.box ul:nth-child(3) img{
margin-left: -280px;
}
.box ul:nth-child(4) img{
margin-left: -420px;
}
ul li{
100%;
height: 100%;
position: absolute;
overflow: hidden;
}
ul li:nth-child(1){
transform: rotateX(90deg) translateZ(190px);
}
ul li:nth-child(2){
transform: rotateX(-90deg) translateZ(190px);
}
ul li:nth-child(3){
transform:rotateX(180deg) translateZ(190px);
}
ul li:nth-child(4){
transform:translateZ(190px);
}
.btn-warp{
680px;
height:1px;
position: relative;
top:-70px;
margin:0 auto;
}
.btn-warp a{
border-radius: 5px;
background: black;
color: #FFF;
}
.btn-warp a:nth-child(1){
display: block;
float: left;
60px;
height:60px;
text-align: center;
line-height: 60px;
}
.btn-warp a:nth-child(2){
display: block;
float: right;
60px;
height:60px;
text-align: center;
line-height: 60px;
}
</style>
javascript
<script>
$(function(){
var num = 0;
//创建一个阀，默认开着
var flag = true;
$('.btn-warp a').on('click',function(){
var index = $(this).index();
//判断阀是否开启，
if(flag){
//运行事件，并且关阀
flag = false;
if(index==0){
num++;
}else if(index==1){
num--;
}
$('.box ul').each(function(index,value){
$(value).css({
'transform':'rotateX('+num*90+'deg)',
'transition':'all 1s+'+index*200+'ms'
})
});
}
});
//判断过渡事件是否执行完毕。
$('.box ul').last().on('transitionend',function(){
//重新打开阀，以便下一次点击
flag = true;
});
});