节流阀在 Java Script 中的使用我们可以结合上一篇文章轮播图的内容，在轮播图中有左右两个播放按钮，点击越快则播放越快，我们这里指的是在上一张图片还没有播放完时就开始播放下一张图片了，我们都来不及看到播放过的图片是什么内容，对此就有了节流阀。

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

节流阀的使用：

节流阀的使用很简单，我们需要先给其一个全局变量，例如 flag，给其赋值为 true，当我们点击按钮时先判断，只有 true 才能执行动画函数，我们在点击一次后，立马将其变量覆盖为 false，这样就无法连续触发了，有人会问，可是这样不就仅仅能够点击一次就再也无法点击了吗？？对，解决这个问题就用上了我们动画函数中的第三个形参 ------- 回调函数，不清楚回调函数是什么的朋友们可以点进去我的这篇文章中有讲解：回调函数，我们很清楚如果有回调函数则是在动画执行完毕后才触发，因此我们在这个回调函数中再将我们的 flag 值改为 true 就可以啦。

在此我们只把右侧按钮的点击事件拿来讲解：

此处代码为右侧点击按钮，左侧按钮同理

 flag=true;    //定义变量rightbtn.addEventListener('click',function(){if(flag==true){   //点击后判断，只有为true 才能执行flag=false;    //判断后立马重新赋值为flaseif(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';}})

我们就是这样利用回调函数，添加了一个变量来进行控制，分步完成锁住动画函数和解锁动画函数，像不像一个节流阀的作用？

“节流阀“ 在轮播图的使用相关推荐

Javascript-API-BOM、动画函数、网页轮播图、节流阀、筋斗云、固定侧边栏返回顶部案例
动画实现原理核心原理:通过定时器 setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件 ...
WebAPI第四天学习总结—— 常见网页特效案例（轮播图、节流阀、返回顶部、筋斗云案例）
常见网页特效案例案例:网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效. 效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.点击右侧按钮一次,图片往 ...
Web APIs：PC 端网页特效--常见网页特效案例--轮播图及节流阀思想
轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: 1. 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2. 点击右侧按钮一次,图片往左播放一张,以此类推, 左侧按钮同理. 3. 图 ...
Web APIs介绍（四）——offset/client/scroll/轮播图/本地存储
1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距 ...
JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例
封校后终于回家咯给即将中考的弟弟加油鼓劲,下午还和涛哥约会但是时间太短了.继续学习吧许个愿,让我中奖让我中奖让我中奖常见网页特效案例案例:网页轮播图(必须掌握) 轮播图装的图片和外面盒子一样大小 ...
用javascript做网页轮播图
文章目录网页轮播图: 功能需求: 动图展示: 代码分析: 主题结构部分: 样式设置: 交互效果: 引用缓动动画(图片滚动的效果) 网页轮播图: 轮播图也称为焦点图,是网页中比较常见的网页特效. 功能 ...
【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...
JS实现轮播图(自动+手动)
网页轮播图效果: 核心原理: tips:代码在文章末尾这个ul就是我们这四张图片的父盒子,我们通过对这个父盒子添加动画函数来实现移动,然后给父盒子来一个溢出隐藏就达到了轮播的效果动画函数如下: f ...
uni-app 小程序项目三 1. 商品列表、过滤器、封装商品item组件、上拉加载、节流阀、下拉刷新、2. 商品详情、轮播图、商品价格闪烁问题 3.加入购物车、vuex、持久化存储、mixiins
1.0 创建 goodslist 分支 1.1 定义请求参数对象为了方便发起请求获取商品列表的数据,我们要根据接口的要求,事先定义一个请求参数对象: data() {return {// 请求参数对 ...

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

节流阀的使用：

在此我们只把右侧按钮的点击事件拿来讲解：

“节流阀“ 在轮播图的使用相关推荐

最新文章

热门文章