关于节流阀的理解

前言：总是感叹于自己的记性真的和鱼一样。果然像我这样平凡的人，还是只能靠烂笔头啊。今天记录一下节流阀的思想，和实现方法。

想象一下有一个开关，控制着动画的运行。就像阀一样，阀开着水才能流出。同样的，我们也可以设一个(阀)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;
        });

    });