如何在JavaScript中「獨一無二地」重複函數n次？

Question

所以我有一些代碼繪製一個路徑和一個圓圈。每次啓動該功能時，該圓都在該路徑上呈動畫形式。我只想創建10條路徑，每條路徑都有自己的圓形，可以在每條路徑上進行動畫處理。當我簡單地執行該函數10次時，路徑生成得很好，但是圓形都沿同一條單一路徑生成。我在這裏做錯了什麼？這裏是創建for（i = 0）循環的最佳方法嗎？

您可以查看我的代碼上jfiddle，或者看看在這裏：

function commerce() { 
Raphael("commercebounce", function() { 
      var r = this; 
      function pathfade() { 
      var pa = .1, 
       pb = .4, 
       pc = [0, 2], 
       pd = [50, 300], 
       pe = [150, 800], 
       pf = [150, 350], 
       pg = pd[0] + Math.random() * (pd[1] - pd[0]), 
       ph = pe[0] + Math.random() * (pe[1] - pe[0]), 
       pi = pf[0] + Math.random() * (pf[1] - pf[0]), 
       bd = .1, 
       be = .9, 
       pathspot = bd + Math.random() * (be - bd), 
       colours = ["215,10,45", "115,115,115"], 
       stroke = ["", "- "]; 
       opacity = pa + Math.random() * (pb - pa), colour = "rgb(" + colours[Math.round(Math.random())] + ")", strokeW = pc[Math.round(Math.random())]; 
       pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({stroke: colour,"stroke-dasharray": stroke[Math.round(Math.random())],"opacity": 0}); 
       bh = r.circle(0, 0, 7, 7).attr({"stroke-width": this.strokeW,stroke: colour,"stroke-opacity": this.opacity,fill: "none","fill-opacity": 0}).onAnimation(function() { 
       var t = this.attr("transform")}) 
       leng = pj.getTotalLength(); 
       r.customAttributes.along1 = function (v) { 
        var point = pj.getPointAtLength(v * leng); 
        return { 
         transform: "t" + [point.x, point.y] + "r" + point.alpha 
         } 
       }; 
       return bh.attr({along1:0}), bh.animate({along1:pathspot},300), pj.animate({opacity:opacity},300), pj, bh 
      } 
pathfade();//how do i repeat this function n times?    
    }); 
} 
commerce(); 

Answer 1

你需要打破pathfade（）函數轉換成多個簡單的函數，只能做幾個任務。

有兩個主要問題。 首先，你在放置一個分號，在你的變量聲明中應該有一個逗號。看看中風變量。 其次，當javascript只支持一個時，pathfade會返回多個值。請記住，一旦從函數返回，其餘的語句不會被執行。

最後，使用for，do-while或while循環重複您的函數調用。

這是修復程序。對不起，我沒有時間重構。

function commerce() { 
    Raphael("commercebounce", function() { 
     var r = this; 
     function pathfade() { 
      var pa = 0.5, 
      pb = 0.9, 
      pc = [0, 2], 
      pd = [50, 300], 
      pe = [150, 800], 
      pf = [150, 350], 
      pg = pd[0] + Math.random() * (pd[1] - pd[0]), 
      ph = pe[0] + Math.random() * (pe[1] - pe[0]), 
      pi = pf[0] + Math.random() * (pf[1] - pf[0]), 
      bd = 0.1, 
      be = 0.9, 
      pathspot = bd + Math.random() * (be - bd), 
      colours = ["215,10,45", "115,115,115"], 
      stroke = ["", "- "], 
      opacity = pa + Math.random() * (pb - pa), 
      colour = "rgb(" + colours[Math.round(Math.random())] + ")", 
      strokeW = pc[Math.round(Math.random())], 
      pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({ 
        stroke : colour, 
        "stroke-dasharray" : stroke[Math.round(Math.random())], 
        "opacity" : 0 
       }), 
      bh = r.circle(0, 0, 7, 7).attr({ 
        "stroke-width" : this.strokeW, 
        stroke : colour, 
        "stroke-opacity" : this.opacity, 
        fill : "none", 
        "fill-opacity" : 0 
       }).onAnimation(function() { 
        var t = this.attr("transform") 
       }), 
       leng = pj.getTotalLength(); 
      r.customAttributes.along1 = function (v) { 
       var point = pj.getPointAtLength(v * leng); 
       return { 
        transform : "t" + [point.x, point.y] + "r" + point.alpha 
       } 
      }; 
      bh.attr({ 
       along1 : 0 
      }); 
      bh.animate({ 
       along1 : pathspot 
      }, 300); 
      pj.animate({ 
       opacity : opacity 
      }, 300); 
     } 
     var i = 10; 
     while(i--){ 
      pathfade(); 
     } 
    }); 
} 
commerce(); 

演示：http://jsfiddle.net/VEdwG/6/

你應該閱讀 「C＃風格的要素」。

http://www.amazon.com/The-Elements-Style-Kenneth-Baldwin/dp/0521671590/ref=cm_cr-mr-title

Answer 2

var n = 5; //or however much you want 
for (var i = 0; i < n; i++){ 
    pathfade(); 
} 

的for循環方法是這裏最簡單的選擇。

Answer 3

據我所見，一個簡單的循環應該沒問題。如果你有興趣，這是最快的方式循環在JavaScript：

var i = 10; while (i--) { 
//Your code.. 
}