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 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
php微信开发接入
2016/08/27 PHP
php封装一个异常的处理类
2017/06/08 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
python实现kMeans算法
2017/12/21 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
社区端午节活动方案
2014/01/28 职场文书
淘宝活动策划方案
2014/02/06 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
小学感恩主题班会
2015/08/12 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android