下邊我就簡單說一下過程和原理。
第一步：實現一個匿名函數並能自己執行。
復制代碼 代碼如下:
（function(){ }）()
這個函數在一樣編的好的JS代碼中經常會見到，起到閉包，自動執行的效果，在函數後加一對()表示自動執行，前邊的匿名函數需要用()包起來，這樣才能為宿主（我們的BOM環境）理解，裡面的function(){}這就是個匿名函數。
第二步：實現動畫，以改變一個box的秀明度來說明。
id為animation的div
復制代碼 代碼如下:
<div id="animation"></div>
要實現animation的透明漸變,需要不斷改變其透明度opacity,我們這樣實現
復制代碼 代碼如下:
for(var i=0;i<10;i++){
setTimeout((function(pos){
return function(){
someAnimation(pos);
}
})(i/10),i*100)
}
下面我們來解釋一下這段代碼，這段代碼比較復雜和難於理解，所以剛開始不明白也沒事，慢慢就懂了,首先解釋一下setTimeout在此處的用法
復制代碼 代碼如下:
setTimeout((function(){})(i/10),i*100)
setTimeout第一個參數為要執行的函數，第二個參數為時間參數，意為多久後開始執行
而js沒有塊的概念，作用域范圍是以函數為准的，所以我們這裡使用的閉包，實現原理如下：
復制代碼 代碼如下:
(function(){
return function(){}
})()
這校才可以執行for循環，達到我們想要的結果，如果我們不使用閉包，代碼會如下：
復制代碼 代碼如下:
for(var i=0;i<10;i++){
setTimeout(function(pos){
someAnimation(pos);
}(i/10),i*100)
}
這樣的for循環只會執行一次，即i=9時，感興趣的同學可以自己試試
到目前為止，整個代碼是這個樣子滴
復制代碼 代碼如下:
(function(){
function someAnimation(args){
document.getElementById("animation").style.opacity=args;
}
for(var i=0;i<10;i++){
setTimeout((function(pos){
return function(){
someAnimation(pos);
}
})(i/10),i*100)
}
})()
這樣實現了id為animation的box透明度從0到1的一次變化。
第三步，實現不停地變化，我們用setInterval來實現
setInterval也是兩個參數，第一個是要執行的函數，第二個是執行間隔時間
至此代碼如下：
復制代碼 代碼如下:
(function(){
function someAnimation(args){
document.getElementById("animation").style.opacity=args;
}
setInterval(function(){
for(var i=0;i<10;i++){
setTimeout((function(pos){
return function(){
someAnimation(pos);
}
})(i/10),i*100)
}
},2000);
})()
下次我會實現這個代碼的面向對象化設計和出一些具體的實現方案，方便學習使用。
全部代碼如下
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#animation{width:500px;height:350px;background-color:red;}
</style>
</head>
<body>
<div id="animation">
</div>
<script type="text/javascript">
(function(){
function someAnimation(args){
document.getElementById("animation").style.opacity=args;
}
setInterval(function(){
for(var i=0;i<10;i++){
setTimeout((function(pos){
return function(){
someAnimation(pos);
}
})(i/10),i*100)
}
},2000);
})()
</script>
</body>
</html>