javascript 闭包 和 函数异步执行的举例

<style type="text/css">
#a1{
background:url(img/Alaphabet-d.jpg);
background-repeat:no-repeat;
background-position:0px -0px;
height:210px;
width:210px;
}

这个css 显示一副大图（字母表）的一部分（每个字母）

用 javascript 控制显示

有两种写法

第一种写法，是我的写法，传参进入 setInterval 中，直接返回一个带参数的函数

function change1(x_i){
if(document.styleSheets[0].cssRules){
document.styleSheets[0].cssRules[0].style["background-position"]="-0px -"+String(215*x_i)+"px";
}
}
function load(){
var i=0;
setInterval(function(){i++;j++; if(i==5) i=0;if(j==5) j=0; change(i,j);},2000);


第二种写法，很有意思

javascript 是异步执行，把所有函数都扔到一个堆栈里，顺序执行

function change1(x_i){
if(document.styleSheets[0].cssRules){
document.styleSheets[0].cssRules[0].style["background-position"]="-0px -"+String(215*x_i)+"px";
}
}
function load(){
var i=0; j=2;
for(i=0;i<50;i++){
( [color=red][b]function(){var j=i;setTimeout(function(){change1(j%5);},1000*j); } )();[/b][/color]
}

}


这个红色字体为什么不能写成下面呢？
var j=i;
setInterval(function(){change1(j%5);},2000);

因为不用闭包包起来，就不能形成自己的作用域，j 值就是变化的

为什么不能写成下面这样呢？
(function(){var j=i;setTimeout(function(){change1(i%5);},1000*j); } )();

首先用 function(){ }() 括起来，就形成了一个自己的域
用j=i ，在此域内获得i 值， 堆栈中的值是存入每次变化的参数

如果直接传参数为i

程序会首先执行完循环， 把函数扔到堆栈中，然后拿出来执行，当执行的时候，i 已经循环结束，为循环最后一个值， 这时候所有的函数参数都一样的