超时和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功能仍然可以访问这些局部变量..这是什么使一个封闭的封闭，毕竟。）