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 load方法用法集锦
Dec 06 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
js对象基础实例分析
Jan 13 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
轮播图组件js代码
Aug 08 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
Promise静态四兄弟实现示例详解
Jul 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
PHP调用三种数据库的方法(2)
2006/10/09 PHP
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP中文编码小技巧
2014/12/25 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
smarty简单应用实例
2015/11/03 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
python绘图库Matplotlib的安装
2014/07/03 Python
关于python写入文件自动换行的问题
2018/06/23 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
工作时间上网检讨书
2014/02/03 职场文书
对标管理实施方案
2014/03/12 职场文书
大学社团计划书
2014/05/01 职场文书
给市场的环保建议书
2014/05/14 职场文书
运动会的口号
2014/06/09 职场文书
药店促销活动总结
2014/07/10 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
信仰纪录片观后感
2015/06/08 职场文书
消防宣传标语大全
2015/08/03 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书