防止轮播图按钮连续点击造成播放过快。
作用:当上一个函数动画内容执行完毕再去执行下一个动画,让事件无法连续触发。
核心思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。
以点击下一章图片按钮为例,代码如下:
var flag = true; //flag作为节流阀开关
element.addEventListener('click',function() {
if(flag) {
flag = false; //关闭节流阀(锁住函数)
if (num == ul.children.length - 1 ) { //图片存至ul
ul.style.left = 0;
num = 0;
}
num ++;
animate(ul, - num * focusWidth, function() {
flag = true; //动画函数执行后执行回调函数来开启节流阀(解锁函数)
});
}
});