“节流阀“ 在轮播图的使用

       节流阀在 Java Script 中的使用我们可以结合上一篇文章 轮播图 的内容，在轮播图中有左右两个播放按钮，点击越快则播放越快，我们这里指的是在上一张图片还没有播放完时就开始播放下一张图片了，我们都来不及看到播放过的图片是什么内容，对此就有了节流阀。

节流阀的作用：等上一张图片动画函数执行完成时，才能再次点击按钮播放下一张图片，无法让事件连续触发

---

节流阀的使用：

节流阀的使用很简单，我们需要先给其一个全局变量，例如 flag，给其赋值为 true，当我们点击按钮时先判断，只有 true 才能执行动画函数，我们在点击一次后，立马将其变量覆盖为 false，这样就无法连续触发了，有人会问，可是这样不就仅仅能够点击一次就再也无法点击了吗？？对，解决这个问题就用上了我们动画函数中的第三个形参 ------- 回调函数，不清楚回调函数是什么的朋友们可以点进去我的这篇文章中有讲解：回调函数 ，我们很清楚如果有回调函数则是在动画执行完毕后才触发，因此我们在这个回调函数中再将我们的 flag 值改为 true 就可以啦。

在此我们只把右侧按钮的点击事件拿来讲解：

此处代码为右侧点击按钮，左侧按钮同理

 flag=true;    //定义变量
    rightbtn.addEventListener('click',function(){
        if(flag==true){   //点击后判断，只有为true 才能执行
            flag=false;    //判断后立马重新赋值为flase
            if(num==circleul.children.length-1){
                circleul.style.left=0;
                num=0;
            }
            num++;
            long=num*windows.offsetWidth-6*num;
            run(circleul,-long,function(){   //添加了回调函数
                flag=true;   //动画函数执行完后 重新赋值为true
            });
        //小圆圈跟着一起变化
            circlechange++;
            if(circlechange==circleul.children.length-1){
               circlechange=0;
            }
            for(var i=0;i<circleol.children.length;i++){
                 circleol.children[i].className='';
            }
            circleol.children[circlechange].className='circlecolor';
        }
    })

我们就是这样利用回调函数，添加了一个变量来进行控制，分步完成锁住动画函数和解锁动画函数，像不像一个节流阀的作用？