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使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
JS常用算法实现代码
Nov 14 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
vue地区选择组件教程详解
May 04 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
前端如何实现动画过渡效果
Feb 05 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
Zend公司全球首推PHP认证
2006/10/09 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
JS array 数组详解
2009/03/22 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
Bootstrap表单布局
2016/07/19 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
Windows下安装Scrapy
2018/10/17 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
个人求职信范文分享
2014/01/06 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
校园公益广告语
2014/03/13 职场文书
课外科技活动总结
2014/08/27 职场文书
党性修养心得体会2016
2016/01/21 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python