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里使用Dom操作Xml
Jan 22 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
js打造数组转json函数
Jan 14 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
原生js+css调节音量滑块
Jan 15 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
PHP5中虚函数的实现方法分享
2011/04/20 PHP
php获取字段名示例分享
2014/03/03 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
js实现列表按字母排序
2020/08/11 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
python list转dict示例分享
2014/01/28 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
什么是封装
2013/03/26 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
个人债务授权委托书
2014/10/17 职场文书
公务员个人总结
2015/02/12 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫