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

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 时它的值会被修改，其次，您要清除之前创建的最后一个 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++;