超時和javascript

Question

我要產生4圈在頁面加載時。但是，即使該函數被調用了4次，我也只看到一個。我想知道我錯過了什麼。是因爲當函數完成時，它已經開始的所有超時都被清除了？

function getRandom(min, max) { 
    return Math.floor((Math.random()*max)+min); 
} 

function generateCircle(leftPos, topPos, zIndex) { 

    $circle = $('<div class="cercleAnime"></div>'); 
    $('body').append($circle); 
    var self = this; 

    self.leftPos = leftPos; 
    self.topPos = topPos; 

    $circle.css({ 
     'left' : self.leftPos+'px', 
     'top' : self.topPos+'px', 
     'z-index' : zIndex 
    }); 

    $circle.animate({'width' : '300px', 'height' : '300px'}, { 
     duration : 5000, 
     progress: function() { 
      newLeft = self.leftPos - $(this).width()/2; 
      newTop = self.topPos - $(this).height()/2; 

      $(this).css({ 
       'left' : newLeft+'px', 
       'top' : newTop+'px' 
      }) 
     }, 
     done: function() { 
      $(this).remove() 
     } 
    }); 

} 


function generateCircles(numberOfCircles, intervalBetweenCircles) { 
    leftPos = getRandom(1,1000); 
    topPos = getRandom(100,400); 
    zIndex = 1000; 
    timeoutTime = intervalBetweenCircles; 

    for(var i = 0; i < numberOfCircles; i++) { 
     zIndex--; 
     setTimeout(function(){generateCircle(leftPos, topPos, zIndex)}, timeoutTime); 
     timeoutTime += intervalBetweenCircles; 
    } 

} 



$(function() { 
    generateCircles(3, 2000); 

    generateCircles(3, 2000); 

    generateCircles(3, 2000); 

    generateCircles(3, 2000); 




}); 

這裏是一個的jsfiddle：http://jsfiddle.net/etiennenoel/BwyH7/

Answer 1

你畫圓用相同的特性 4倍。 （他們很好地堆疊在彼此的頂部，並隱瞞以前的圈子。）

這是因爲在generateCirclesleftPos和topPos（ETC）是全局變量和第一圈連平之前被覆蓋。請記住，setTimeout回調將運行「在將來的某個時候」。

一種解決方案是使用當地變量，使得它們在封閉約束：

var leftPos = getRandom(1,1000); 
var topPos = getRandom(100,400); 
// etc 

（該範圍封鎖，即傳遞給setTimeout功能仍然可以訪問這些局部變量..這是什麼使一個封閉的封閉，畢竟。）