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

简介: “节流阀“ 在轮播图的使用

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

节流阀的使用:

节流阀的使用很简单,我们需要先给其一个全局变量,例如 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
目录
打赏
0
1
1
0
6
分享
相关文章
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
186 2
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
153 1
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
99 0
Terraform从入门到实践:快速构建你的第一张业务网络(上)
本次分享主题为《Terraform从入门到实践:快速构建你的第一张业务网络》。首先介绍如何入门和实践Terraform,随后演示如何使用Terraform快速构建业务网络。内容涵盖云上运维挑战及IaC解决方案,并重磅发布Terraform Explorer产品,旨在降低使用门槛并提升用户体验。此外,还将分享Terraform在实际生产中的最佳实践,帮助解决云上运维难题。
317 1
Terraform从入门到实践:快速构建你的第一张业务网络(上)
在JavaScript中如何获取时间戳?
在JavaScript中如何获取时间戳?
187 0
什么是精灵图
什么是精灵图
264 1
|
6月前
|
js---三元表达式详解
js---三元表达式详解
234 0
content-box和border-box是什么?
content-box和border-box是什么?
292 0
程序员的代码规范需求
程序员的代码规范需求
85 1

热门文章

最新文章