Question

var move = function() {
    Xpos = Math.round(Math.random() * 95);
    food[num].css('left', Xpos + '%');

    interval = setInterval(function() {
        console.log(i);
        var posTop = food[num].offset().top / $(window).height() * 100;

        while(posTop < 80) {
            if(posTop === 80) {
                num++;
                break;
            }

            posTop += 1;
            food[num].css('top', posTop + '%');
            break;
        }
    }, speed);   
}

//Color the circle
circleColor();

move();
}

好的，这是我的代码。它在屏幕顶部创建一个圆圈（<div>元素）并为其提供随机x坐标。比把它放在food[]数组中。整个代码通过单击按钮开始，但每次我再次按下按钮时，最后一次移动的圆停止，功能创建一个新的，新的移动。有没有办法可以让阵列中的所有元素移动而不依赖于彼此？

http://jsfiddle.net/yqwjqx31/

我理解为什么会发生这种情况，但我不知道如何解决这个问题。

Answer 1

首先，您在setInterval函数处理程序中使用全局变量 num ，因此在新cercle create中使用它时会修改其值，其次是清除最后一个的间隔你在创建一个新的cercle之前创建的cercle。这意味着你在所有cercles之间共享相同的间隔。使用一个间隔数组，就像 var food = []一样，并使用临时变量来防止在setInterval处理程序中修改索引值。这是一个有效的fiddle

    //Interval
    var interval =[];

    var tempNum = num;
    interval[num] = setInterval(function() {
        var posTop = food[tempNum].offset().top / $(window).height() * 100;

        while(posTop < 80) { 
            if(posTop === 80) {

                    break;
            }
            posTop += 1;
            food[tempNum].css('top', posTop + '%');
            break;
        }
    }, speed);

增加 num 变量

    //Color the circle
    circleColor();

    move();
    num++;

Answer 2

您的move函数仅负责通过div移动上一次生成的createCircle。如果你想将它们全部移动直到碰撞，你需要遍历它们并相应地移动它们。或者，您可以通过CSS为它们制作动画。

以下是工作版本： http://jsfiddle.net/yqwjqx31/3/

注意setInterval回调如何循环遍历所有div并将其推下直到它们的高度为80.

var move = function () {
            interval = setInterval(function () {
                for (var i = 0; i < food.length; ++i) {
                    var posTop = food[i].offset().top / $(window).height() * 100;
                    if (posTop < 80) posTop += 1;
                    food[i].css('top', posTop + '%');
                }
            }, speed);
        }

移动存储在数组中的div元素

2 个答案: