javascript - 同时 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

问题是您只有一个全局的云。

在声明前添加var:

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

当您不使用 var 时关键字，您使变量成为全局变量。