仅在函数外部起作用的javascript代码-为什么? [英] javascript code that only works outside of a function - why?
问题描述
为什么这段代码不能像下面的代码那样工作,但是如果我注释掉 function testBgChange(){
函数并将代码保留在该函数中,它将可以正常工作.如果我将代码保留在函数中,然后调用该函数,会有什么区别?
How come this code does not work as its written below but if I comment out function testBgChange(){
and keep the code inside that function it works fine. What difference does it make if I keep the code within the function and then call that function?
<html>
<head>
<script type="text/javascript">
testBgChange();
function testBgChange(){
var i = 0;
var c = 0;
var time = 3000;
var incr = 3000;
while(i<=3){
if(c==0){
var red = "#FF0000";
setTimeout("changeBgColor(red)",time);
time+=incr;
c=1;
}
else if(c==1){
var white = "#FFFFFF";
setTimeout("changeBgColor(white)",time);
time+=incr;
c=0;
}
i+=1;
}
}
function changeBgColor(color){
document.getElementById("alert").style.backgroundColor = color;
}
</script>
</head>
<body>
<p id="alert">
<br>
<br>
Testing
<br>
<br>
</p>
</body>
</html>
推荐答案
由于在函数中声明 var red
和 var white
时,只能从内部访问功能.这是一个问题,因为 setTimeout
将在全局范围内调用 eval
,而该全局范围无法访问这些变量.
Because var red
and var white
, when declared inside the function, can only be accessed from within the function. This is a problem becausesetTimeout
will call eval
in the global scope, which does not have access to these variables.
有多种方法可以解决此问题,但是最好给 setTimeout
一个函数而不是字符串.当新函数创建一个 closure 并保留对包含函数中变量的访问权限时,这将解决您的问题:
There are a variety of ways to work around this, but it's better practice to give setTimeout
a function rather than a string. This will solve your problem as the new function creates a closure that retains access to the variables in the containing function:
var red = "#FF00000";
setTimeout(function () {
changeBgColor(red);
}, time);
这篇关于仅在函数外部起作用的javascript代码-为什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!