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 继承详解(二)
Jul 13 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
使用Ajax实现进度条的绘制
Apr 07 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
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
jQuery使用手册之一
2007/03/24 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python中super函数用法实例分析
2019/03/18 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
生日寿宴答谢词
2014/01/19 职场文书
新任教师自我鉴定
2014/02/24 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
综治维稳工作汇报
2014/10/27 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
校长师德表现自我评价
2015/03/04 职场文书
如何写辞职信
2015/05/13 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
Oracle中日期的使用方法实例
2022/07/07 Oracle
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS