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 相关文章推荐
动态加载js和css(外部文件)
Apr 17 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
原生js实现放大镜效果
Jan 11 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 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中用正则表达式清除字符串的空白
2011/01/17 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
Python迭代用法实例教程
2014/09/08 Python
python开发之for循环操作实例详解
2015/11/12 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
Python内置函数及功能简介汇总
2020/10/13 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
运动会解说词50字
2014/01/18 职场文书
物业工程部岗位职责
2015/02/11 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
百万英镑观后感
2015/06/09 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
2016春节放假通知范文
2015/08/18 职场文书
Go timer如何调度
2021/06/09 Golang