在循環中創建函數的新實例

Question

我正在嘗試爲我製作的遊戲創建一個簡單的背景，並且每次運行循環時都需要我的函數的新實例。

以前我曾嘗試打電話給我的功能像這樣：

Sprite(); 
Sprite(); 
Sprite(); 
Sprite(); 
Sprite(); 
Sprite(); 
Sprite(); 

這個工作，創建了功能的幾個實例。但是，當我在一個循環中嘗試這個時，它只創建10個相同的實例，而不是再次將其作爲新實例調用。

我已經嘗試的代碼是：

for(var i = 0; i <= 10; i++){ 
    Sprite(); 
    setTimeout(Sprite, 1000); 
} 

function Sprite(){ 
    // set the sprite properties 
    this.r = 30 * Math.random().toFixed(2); 
    this.x = Math.floor(Math.random(Math.random()) * 5000);  //Start position 
    this.y = Math.floor(Math.random(Math.random()) * 5000);  //Start position 
    this.dx = Math.floor(this.x + this.r);      //Destination position 
    this.dy = Math.floor(this.y + this.r);      //Destination position 
    this.s = Math.random(Math.random()).toFixed(2)* 5000; 
    this.active = true; 

    //create the sprite 
    var div = document.createElement('div'); 
    div.id = 'block'; 
    div.className = 'block'; 
    document.getElementsByTagName('body')[0].appendChild(div); 

    // call the animate function 
    animSprite(); 

    // logging output 
    console.log("sprite has been created: \nthis.r = " + r + "\nthis.x = " + x + "\nthis.y = " + y + "\nthis.dx = " + dx + "\nthis.dy = " + dy + "\nthis.s = " + s + "\nanimSprite() = true"); 
} 

上述調用下面的動畫的div： //動畫精靈

function animSprite(n){ 
    //will need a switch case to determine which shape has which properties 
    switch(n){ 
     case 1: 
      // animate the div 
      $('.block').animate({ 
       top: this.y, 
       right: this.x 
      }, this.s); 
     break; 
     case 2: 
      // animate the div 
      $('.block').animate({ 
       top: this.y, 
       bottom: this.x 
      }, this.s); 
     break; 
     case 3: 
      // animate the div 
      $('.block').animate({ 
       bottom: this.y, 
       right: this.x 
      }, this.s); 
     break; 
     case 4: 
      // animate the div 
      $('.block').animate({ 
       left: this.y, 
       bottom: this.x 
      }, this.s); 
     break; 

    } 
} 

我在哪裏出了錯？如何我修正它就好像每次循環運行時都會調用一個新函數？我更喜歡jQuery免費解決方案，但我願意使用它。

Answer 1

如果我理解正確的你，這是你想達到什麼目的：

Demonstration

(function() { 
    "use strict"; 

    function Sprite() { 
     var ele = null; 

     this.s = Math.random().toFixed(2) * 5000; 
     this.r = Math.random().toFixed(2) * 30; 
     this.x = Math.floor(Math.random() * 5000); 
     this.y = Math.floor(Math.random() * 5000); 
     this.dx = Math.floor(this.x + this.r); 
     this.dy = Math.floor(this.y + this.r); 
     this.active = true; 

     if (typeof Sprite._div === "undefined") { 
      Sprite._i = 0; 
      Sprite._div = document.createElement("div"); 
      Sprite._div.id = "block"; 
      Sprite._div.className = "block"; 
     } 

     ele = Sprite._div.cloneNode(true); 
     document.body.appendChild(ele); 

     animSprite.call(this, ++Sprite._i, ele); 
    } 

    function animSprite(n, ele) { 
     var obj = null; 
     switch (n % 4) { 
      case 0: 
       obj = { 
        top: this.y, 
        right: this.x 
       }; 
       break; 
      case 1: 
       obj = { 
        top: this.y, 
        bottom: this.x 
       }; 
       break; 
      case 2: 
       obj = { 
        bottom: this.y, 
        right: this.x 
       }; 
       break; 
      case 3: 
       obj = { 
        left: this.y, 
        bottom: this.x 
       }; 
       break; 
     } 
     $(ele).animate(obj, this.s); 
    } 
    for (var i = 1; i <= 50; i++) { 
     setTimeout(function() { 
      new Sprite(); 
     }, i * 1000); 
    } 
}()); 

Answer 2

這是因爲setTimeout()不停止代碼執行，代碼繼續進行，並有多個覆蓋的調用。我建議在for循環之後執行setInterval()，或者直接在控制檯上打印出來。使用透明度屬性

例如：

function Sprite(name){ this.name = name; console.log(name); } 

var array = ['a','b','c','d','e','f','g','h','i','j'] 
for(var i = 0; i < 10; i++){ 
    Sprite(array[i]); 
} 

http://jsfiddle.net/4Y5se/