解决JavaScript定时器setTimeout无法调用局部变量的问题

JavaScript定时器局部变量调用问题

在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是beginrotate内部的局部函数，因此无法被访问。只需稍作调整即可解决此问题，修正后的代码如下：

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

关键修改在于将setTimeout的第一个参数从字符串"rotateloop()"改为函数引用rotateloop。这样，定时器将直接引用函数对象，从而正确访问其所在作用域内的局部变量。