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中DOM的基本属性
Feb 26 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
vue实现单选和多选功能
Aug 11 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
关于Vue中$refs的探索浅析
Nov 05 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.ini中文版(2)
2006/10/09 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
Zabbix实现微信报警功能
2016/10/09 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
Python程序慢的重要原因
2020/09/04 Python
css3中transition属性详解
2014/09/02 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
十佳护士获奖感言
2014/02/18 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
2016党校培训心得体会
2016/01/07 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python