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

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

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

节流阀的使用:

节流阀的使用很简单,我们需要先给其一个全局变量,例如 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
目录
相关文章
|
11月前
|
存储 自然语言处理 编译器
【C语言】编译与链接:深入理解程序构建过程
【C语言】编译与链接:深入理解程序构建过程
177 1
|
数据采集 运维 搜索推荐
手把手教你如何申请网站空间
网站空间就像房屋的地基,对网站运营的影响非常大。在网站还没有发布之前,首先需要考虑存放的空间。
1820 0
手把手教你如何申请网站空间
|
缓存 NoSQL Java
SpringBoot实现缓存预热的几种常用方案
SpringBoot实现缓存预热的几种常用方案
|
机器学习/深度学习 人工智能 自然语言处理
基于RTMP的智慧数字人|AI数字人传输技术方案探讨
随着智慧数字人、AI数字人的兴起,越来越多的公司着手构建全息、真实感数字角色等技术合成的数字仿真人虚拟形象,通过“虚拟形象+语音交互(T-T-S、ASR)+自然语言理解(NLU)+深度学习”,构建适用于数字客服、虚拟展厅讲解、 智慧城市、智慧医疗、智慧教育等场景,通过人机可视化语音交互,释放人员基础劳动力,降低运营成本,提升智慧交互体验。
247 0
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
LTX Video:Lightricks推出的开源AI视频生成模型
LTX Video是由Lightricks推出的开源AI视频生成模型,能够在4秒内生成5秒的高质量视频。该模型基于2亿参数的DiT架构,确保帧间平滑运动和结构一致性,支持长视频制作,适用于多种场景,如游戏图形升级和电子商务广告变体制作。
566 1
LTX Video:Lightricks推出的开源AI视频生成模型
|
12月前
|
网络协议
深入理解TCP作为面向字节流协议的工作原理
深入理解TCP作为面向字节流协议的工作原理
358 1
|
11月前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
137 1
|
11月前
什么是事件流?
什么是事件流?
145 1
|
11月前
|
程序员 测试技术
程序员的代码规范需求
程序员的代码规范需求
119 1
|
11月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
170 1