节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。
防止轮播图按钮连续点击造成播放过快。
核心思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。
开始设置一个变量var flag = true;
if(flag){falg = fasle;do something} 关闭水龙头
利用回调函数 动画执行完毕,flag = true 打开水龙头
下面是上一节右键点击滑动轮播图案例:
//flag节流阀
var flag = true;
arrow_r.addEventListener('click',function(){
if(flag){
flag = false;
if(num == ul.children.length-1) {
ul.style.left = 0;
num = 0;
}
num++ ;
animate(ul , -num*focusdWidth,function(){
flag = true;//打开节流阀
});
circle++;
if (circle == ul.children.length-1) {
circle = 0;
}
circleChange();//调用函数实现排它
}
})
学习快乐!