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次的圆圈。（他们很好地堆叠在一起并隐藏前面的圆圈。）

这是因为leftPos中的topPos和generateCircles（等）是全局变量，并且在第一个圆圈甚至绘制之前被覆盖。请记住，setTimeout回调将在“未来的某个时刻”运行。

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

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

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

超时和JavaScript

1 个答案: