0

我想在页面加载时生成 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/

4

1 回答 1

3

您正在绘制具有相同特征的圆4 次。（它们很好地堆叠在一起并隐藏了以前的圆圈。）

这是因为leftPosand topPos(etc) ingenerateCircles是全局变量，甚至在第一个圆圈绘制之前就被覆盖了。请记住，setTimeout回调将在“将来的某个时间点”运行。

一种解决方案是使用局部变量，使它们绑定在闭包中：

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

（范围内的闭包，即传递给的函数setTimeout仍然可以访问这些局部变量......毕竟这就是闭包的原因。）

于 2013-10-25T22:25:53.557 回答