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 版本]
Mar 20 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
vue实现在线翻译功能
Sep 27 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
vue+Element-ui实现登录注册表单
Nov 17 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位运算的简单权限设计
2013/06/30 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php删除指定目录的方法
2015/04/03 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
PHP echo()函数讲解
2019/02/15 PHP
Javascript this指针
2009/07/30 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Sanic框架配置操作分析
2018/07/17 Python
Python异常处理操作实例详解
2018/08/28 Python
基于python实现百度翻译功能
2019/05/09 Python
python 中如何获取列表的索引
2019/07/02 Python
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
银行竞聘演讲稿范文
2014/04/23 职场文书
2015年团支书工作总结
2015/04/03 职场文书
回复函格式及范文
2015/07/14 职场文书
教师师德工作总结2015
2015/07/22 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
Golang bufio详细讲解
2022/04/21 Golang