js 定时器setTimeout无法调用局部变量的解决办法


Posted in Javascript onNovember 28, 2013

javascript中定时器setTimeout的用法一般如下,调用beginrotate之后就进入定时执行rotateloop的一个过程,如下代码:

var angle = 0; function rotateloop() { 
if (angle < 360) { 
angle++; 
//use angle 
//...... 
setTimeout("rotateloop()", 100); 
} 
} 
function beginrotate() { 
//do something 
//...... 
setTimeout("rotateloop()", 100); 
}

这段代码有一个问题,就是产生了一个全局变量angle,这显然不是好的编程习惯,所以我们想到使用内嵌函数的方式,将代码改成如下:
function beginrotate() { var angle = 0; 
function rotateloop() { 
if (angle < 360) { 
angle++; 
//use angle 
//...... 
setTimeout("rotateloop()", 100); 
} 
} 
//do something 
//...... 
setTimeout("rotateloop()", 100); 
}

这样子改了之后,发现javascript报错了,rotateloop找不到,显然setTimeout没有找到rotateloop这个局部内嵌函数,这里只要稍微改一下就可以解决这个问题了,代码如下:
function beginrotate() { var angle = 0; 
function rotateloop() { 
if (angle < 360) { 
angle++; 
//use angle 
//...... 
setTimeout(rotateloop, 100); 
} 
} 
//do something 
//...... 
setTimeout(rotateloop, 100); 
}

只需要将setTimeout的第一个参数改成函数对象,而不是字符串,就可以了。
Javascript 相关文章推荐
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
解析js如何获取css样式
Dec 11 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 #Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 #Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 #Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 #Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 #Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 #Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 #Javascript
You might like
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
小谈php正则提取图片地址
2014/03/27 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
页面使用密码保护代码
2013/04/10 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
Angular模版驱动表单的使用总结
2018/05/05 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
出国签证在职证明
2014/01/16 职场文书
家长对孩子评语
2014/01/30 职场文书
王老吉广告词
2014/03/20 职场文书
安全负责人任命书
2014/06/06 职场文书
转让协议书范本
2014/09/13 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
争做文明公民倡议书
2019/06/24 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript