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 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
JS数组的常见用法实例
Feb 10 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
JS实现简易留言板增删功能
Feb 08 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
php设计模式之单例模式使用示例
2014/01/20 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
php HTML无刷新提交表单
2016/04/05 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
python中MySQLdb模块用法实例
2014/11/10 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Django中信号signals的简单使用方法
2019/07/04 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
巴西购物网站:Onofre Agora
2020/06/08 全球购物
财务经理的岗位职责
2013/12/17 职场文书
单位创先争优活动方案
2014/01/26 职场文书
环保公益广告语
2014/03/13 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
公司出纳岗位职责
2015/03/31 职场文书