节流阀的作用:等上一张图片动画函数执行完成时,才能再次点击按钮播放下一张图片,无法让事件连续触发
节流阀的使用:
节流阀的使用很简单,我们需要先给其一个全局变量,例如 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'; } })v