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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
原生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
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
jQuery each()小议
2010/03/18 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
探究python中open函数的使用
2016/03/01 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python自动化报告的输出用例详解
2018/05/30 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
numpy库reshape用法详解
2020/04/19 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
网络编辑岗位职责范本
2014/02/10 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
国贸专业求职信
2014/06/28 职场文书
法人授权委托书
2014/09/16 职场文书
置业顾问岗位职责
2015/02/09 职场文书