2012-03-29 74 views
0

我正在raphaeljs上建立一個運行燈庫。在下面的代碼示例中,我試圖遍歷5個塊中的一組圓,並單獨爲塊設置動畫。JavaScript參數更改值?

我不明白的是爲什麼x在第一次警報中的值爲1,並在將其傳遞給淡入淡出功能後變爲2。任何想法爲什麼?我必須通過無法弄清楚的東西來忽略某些東西......謝謝!後for環路(在每個動畫步驟結束)已退出

Raphael(function() { 

    var r = Raphael("Test"), 

    run = document.getElementById("run"), set = r.set(r.circle(62, 100, 6), 
      r.circle(125, 100, 3), r.circle(139, 100, 3), 
      r.circle(153, 100, 3), r.circle(167, 100, 3), 
      r.circle(181, 100, 3), r.circle(195, 100, 3), 
      r.circle(209, 100, 3), r.circle(223, 100, 3), 
      r.circle(237, 100, 3), r.circle(251, 100, 3), 
      r.circle(265, 100, 3), r.circle(279, 100, 3), 
      r.circle(293, 100, 3), r.circle(307, 100, 3), 
      r.circle(321, 100, 3), r.circle(334, 100, 3), 
      r.circle(348, 100, 3), r.circle(362, 100, 3), 
      r.circle(376, 100, 3), r.circle(390, 100, 3)).attr({ 
     stroke : "none", 
     fill : "#e6e6e6" 
    }), 

    fade = function(obj, id, x) { 
     alert('passed x = ' + x); 
     return function() { 

      obj[(5 * x) - id].attr({ 
       fill : "#49719b", 
       r : 4 
      }).animate({ 
       fill : "#e6e6e6", 
       r : 3 
      }, 400); 
     }; 
    }; 

    run.onclick = function() { 

     var i = 0; 

     while (i <= 0) { 

      for (x = 1; x <= 1; x++) { 

       alert('initial x = ' + x); 

       setTimeout(function() { 
        set[0].animate({ 
         "20%" : { 
          callback : fade(set, 0, x) 
         }, 
         "40%" : { 
          callback : fade(set, 1, x) 
         }, 
         "60%" : { 
          callback : fade(set, 2, x) 
         }, 
         "80%" : { 
          callback : fade(set, 3, x) 
         }, 
         "100%" : { 
          callback : fade(set, 4, x) 
         } 
        }, 650); 
       }, i * 650); 
      } 
      i++; 
     } 
    }; 
}); 

回答

1

JavaScript沒有變量塊範圍......你必須使用一個封閉:

for (x = 1; x <= 1; x++) { 
    (function (x) { 
     alert('initial x = ' + x); 

     setTimeout(function() { 
      set[0].animate({ 
       "20%": { 
        callback: fade(set, 0, x) 
       }, 
       "40%": { 
        callback: fade(set, 1, x) 
       }, 
       "60%": { 
        callback: fade(set, 2, x) 
       }, 
       "80%": { 
        callback: fade(set, 3, x) 
       }, 
       "100%": { 
        callback: fade(set, 4, x) 
       } 
      }, 650); 
     }, i * 650); 
    })(x); 
} 
+0

大謝謝你,它的工作現在。但我真的不明白這裏發生了什麼。你把setTimeout調用放在一個函數中,以確保x隨時間保持它的值?語法用函數(x){...}(x)做什麼? – 2012-04-02 08:47:41

+0

這個語法讓你在定義後立即調用一個匿名函數。我將x作爲參數傳遞給此函數。 – 2012-04-02 10:15:41

1

fade函數被調用。 x的值將是2,因爲那是循環應該退出的時間(當x不是<= 1,並且第一次發生的時候是x達到2時)。