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操作文本框readOnly
May 15 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
JS跨域总结
Aug 30 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
vue组件命名和props命名代码详解
Sep 01 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/03 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP中list方法用法示例
2016/12/01 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
实例讲解python中的序列化知识点
2018/10/08 Python
python 实现识别图片上的数字
2019/07/30 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
python烟花效果的代码实例
2020/02/25 Python
python中类与对象之间的关系详解
2020/12/16 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
服装机修工岗位职责
2013/12/26 职场文书
课程设计心得体会
2013/12/28 职场文书
党校学习思想汇报
2014/01/06 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
舞蹈专业求职信
2014/06/13 职场文书
资料员岗位职责范本
2015/04/13 职场文书
2016年寒假见闻
2015/10/10 职场文书