同时setIntervals - 只有第一个运行

Question

我正在设计一个在后台移动云的网页.我的代码使用jQuery,看起来像这样.

browserWidth = 0;
browserHeight = 0;
clouds = 4; 
cloudSpeed = 50;

$(function() {  
    browserWidth = $(window).width();
    browserHeight =  $(window).height();

    for(i = 0; i < clouds; i++) {
        createCloud(cloudSpeed);
    }
});

function moveCloud(cloud) {
    offset = cloud.offset();
    posX = offset.left;
    posX--;

    if(posX < -250) {
        posX = browserWidth;
    }

    cloud.offset({
        left: posX
    });
}

function createCloud(speed) {
    posY = Math.floor(Math.random() * (browserHeight / 2.5));
    posX = Math.floor(Math.random() * (browserWidth - 255));

    cloud = $("<div></div>").addClass("cloud").appendTo("body").offset({
        top: posY,
        left: posX
    });

    setInterval(function() {
        moveCloud(cloud);
    }, speed);
}

基本上它使用createCloud函数来创建四个云(带有背景图像的div),它初始化div并使用设置间隔setInterval.在区间函数中,我调用moveCloud将div向左移动一个像素的函数.请参阅上面的代码.

我的问题是它只移动了一个div.我已经读过,可以同时使用多个间隔.

代码有什么问题？

Answer 1

问题是你只有一个,全局的,cloud.

var在声明前添加:

var cloud = $("<div></div>").addClass("cloud").appendTo("body").offset({

如果不使用var关键字,则将变量设置为global.