JS定时器实现数值从0到10来回变化


Posted in Javascript onDecember 09, 2016

效果:数值从0到10来回变化

代码:

var a=0
var timer1,timer2;
function add(){
a++;
console.log(a);
if(a>=10){
clearInterval(timer1);
timer2=setInterval(sub,200);
}
}
function sub(){
a--;
console.log(a);
if(a<=0){
clearInterval(timer2);
timer1=setInterval(add,200);
} 
}
timer1=setInterval(add,200);

----------分割线------------------------

此效果看似简单,但是实际写的时候发现JS定时器有一些不易察觉的坑,一不小心就会造成定时器叠加,导致变化越来越快,直到变化间隔达到浏览器的极限(chrome的为5ms)。值得注意的是,虽然每次都用clearInterval把timer清楚掉了,但是每次新的循环还是会使timer的值在原有基础上加1

以上所述是小编给大家介绍的JS定时器实现数值从0到10来回变化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery animate 动画效果使用说明
Nov 04 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
layui清空,重置表单数据的实例
Sep 12 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
原生js实现查询天气小应用
Dec 09 #Javascript
JS实现太极旋转思路分析
Dec 09 #Javascript
学习使用bootstrap的modal和carousel
Dec 09 #Javascript
PHP+jquery+ajax实现分页
Dec 09 #Javascript
javascript垃圾收集机制的原理分析
Dec 08 #Javascript
基于JS实现的随机数字抽签实例
Dec 08 #Javascript
利用js+css+html实现固定table的列头不动
Dec 08 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
javascript 回调函数详解
2014/11/11 Javascript
angularjs基础教程
2014/12/25 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python assert的用处示例详解
2019/04/01 Python
Python csv模块使用方法代码实例
2019/08/29 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
python元组拆包实现方法
2021/02/28 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
车间机修工岗位职责
2014/02/28 职场文书
美国留学经济担保书
2014/05/20 职场文书
出国留学担保书
2014/05/20 职场文书
获奖感言怎么写
2015/07/31 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
学生会部长竞选稿
2015/11/19 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
python基于turtle绘制几何图形
2021/06/15 Python