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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
传智播客学习之JavaScript基础篇
Nov 13 Javascript
javascript 原型继承介绍
Aug 30 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
详解Vue中的watch和computed
Nov 09 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
Python程序中设置HTTP代理
2016/11/06 Python
django文档学习之applications使用详解
2018/01/29 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
python mock测试的示例
2020/10/19 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
优秀小学生家长评语
2014/01/30 职场文书
旅游个人求职信范文
2014/01/30 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
奥林匹克的口号
2014/06/13 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书