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控制frame,iframe的src属性代码
Dec 31 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
js实现抽奖功能
Nov 24 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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
小程序自定义日历效果
2018/12/29 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
python实现控制COM口的示例
2019/07/03 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
经贸日语专业个人求职信
2013/12/13 职场文书
广告学毕业生求职信
2014/01/30 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
讲党性心得体会
2014/09/03 职场文书
党校个人总结
2015/03/04 职场文书
清明节主题班会
2015/08/14 职场文书
2016年少先队活动总结
2016/04/06 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
Redis唯一ID生成器的实现
2022/07/07 Redis